Question

我想使用Ajax发送的形式，但即使我e.preventDefault（）页在重新加载。这里是我的HTML：

<form action="/user/changeProfileData" id="edit-profile_form" method="post"> 
 
    <ul class='profile-data'> 
 
    <li class='profile-data_item persona-icon'>Никнейм: <input id='profile_nickname' name='nickname' type="text" placeholder="Nickname:" value="{{myNickname}}" ></li> 
 
    <li class='profile-data_item'>Name: <input name='name' id='profile_name' type="text" placeholder="Name:" value="{{myName}}"></li> 
 
    <li class='profile-data_item'>Surname: <input name='surname' id='profile_surname' type="text" placeholder="Surname:" value="{{mySurname}}" ></li> 
 
    <li class='profile-data_item b-day-icon'>Age: <input name='age' id='profile_age' type="text" placeholder="Age:" value="{{myAge}}"></li> 
 
    <li class='profile-data_item place-icon'><input type="text" name='city' id='profile_city' placeholder="City" value="{{myCity}}" :readonly="inputStatus == 1 ? true : false">, <input name='country' id='profile_country' type="text" placeholder="Страна" value="{{myCountry}}" :readonly="inputStatus == 1 ? true : false"></li> 
 
    <li class='profile-data_item phone-icon'>Phone: <input name='phoneNumber' id='profile_phoneNumber' type="text" placeholder="Phone:" value="{{myPhoneNumber}}"></li> 
 
    <input type="hidden" name="_csrf" value='{{csrfToken}}' /> 
 
    <input type="submit" value="Submit" id="edit-profile_submit"> 
 
    </ul> 
 
</form>

而且我ajax.js代码：

$(document).ready(function(){ 

var csrf_token = {{csrfToken}}; 

$("body").bind("ajaxSend", function(elm, xhr, s){ 
    if (s.type == "POST") { 
     xhr.setRequestHeader('X-CSRF-Token', csrf_token); 
    } 
}); 



$('#edit-profile_submit').click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     contentType:"application/x-javascript; charset:UTF-8", 
     global: false, 
     type: 'POST', 
     url: '/user/changeProfileData', 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      nickname: $("#profile_nickname").val(), 
      surname: $("#profile_surname").val(), 
      country: $("#profile_country").val(), 
      city: $("#profile_city").val(), 
      phoneNumber: $("#profile_phoneNumber").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      console.log(error); 
     } 
    }); 
}); 
}); 

和服务器代码，如果需要的话：

router.post('/changeProfileData', function (req, res, next){ 
var id = req.user._id; 
console.log(req.body); 
var nickname = req.body.nickname; 
var name = req.body.name; 
var surname = req.body.surname; 
var age = req.body.age; 
var city = req.body.city; 
var country = req.body.country; 
var phoneNumber = req.body.phoneNumber; 

User.findByIdAndUpdate(id, { $set: { nickname: nickname, name: name, surname: surname, age: age, city: city, country: country, phoneNumber: phoneNumber }}, function (err, user) { 
    if (err) return handleError(err); 
    console.log("ADDED!!!!!!!!!!!!!"); 
}); 

}）; 这里的一切都可以用路线。 我的形式发送，数据被存储在数据库中，但我提交表单的页面试图重新启动了很长时间，并最终由在表格指定的链接进入。请帮助我，我要疯了......

Answer 1

尝试把下面的数据类型，这条线在阿贾克斯

async: true 

而且你应该添加一个res.end（）当您使用POST请求上完成

Answer 2

取而代之的是点击操作处理程序安装到提交按钮的服务器，你应该是处理程序安装到submit活动形式。

$('#edit-profile_form').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     contentType:"application/x-javascript; charset:UTF-8", 
     global: false, 
     type: 'POST', 
     url: '/user/changeProfileData', 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      nickname: $("#profile_nickname").val(), 
      surname: $("#profile_surname").val(), 
      country: $("#profile_country").val(), 
      city: $("#profile_city").val(), 
      phoneNumber: $("#profile_phoneNumber").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      console.log(error); 
     } 
    }); 
}); 
}); 

您可以阅读有关submit事件的更多信息。