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

尝试将此行放在ajax

中的数据类型下面

 async: true

此外，您应该在服务器上完成发布请求后添加res.end（）

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事件的更多信息。

当我发送ajax查询时，为什么我的页面会尝试重新加载？

2 个答案: