如何使用Ajax发送数据而无需重新加载页面？ （Node.js）

Question

我无法发送数据并将其保存在数据库中，而无需重新加载。 我什至不明白，为什么我的页面重新加载。 我不知道如何解决我的问题...

这是我的表格：

        <form action="/user/change" method="post">
           Name: <input type="text" id="name" name='profile_name' value="{{myName}}">
           Surname: <input type="text" id="surname" name="profile_surname" value="{{mySurname}}">
           Age: <input id="profile_age" name="age" type="text" value="{{myAge}}">
           <input type="hidden" name="_csrf" value='{{csrfToken}}'>
           <input type="submit" value="Send" id="send_profile">
        </form>

这是我的ajax脚本：

$('#send_profile').click(function() {
    $.ajax({
        global: false,
        type: 'POST',
        url: /user/change,
        dataType: 'html',
        data: {
            name: $("#profile_name").val(),
            surname: $("#profile_surname").val(),
            age: $("#profile_age").val()
        },
        success: function (result) {
            console.log(result);
        },
        error: function (request, status, error) {
            serviceError();
        }
    });
});

还有我的Node.js请求处理程序：

router.post('/change', function (req, res) {
var name = req.body.name,
surname = req.body.surname,
age = req.body.age

User.findOneAndUpdate({_id: req.user._id}, {$set:{name: name, surname: surname, age: age}}, {new: true}, function(err, doc){
    if(err){
        console.log("Something wrong when updating data!");
    }
    console.log(req);
    console.log('req received');
    res.redirect('/user/'+req.user._id);
});
});

Answer 1

提交时默认情况下，您的表单数据将发送表单的action属性。 如果为空，它们将在同一页上发送数据。 为了防止使用任何形式的默认提交功能，我们使用e.preventDefault();

$('#send_profile').click(function() {
    e.preventDefault();
    $.ajax({
        global: false,
        type: 'POST',
        url: '/user/change', // missing quotes  
        dataType: 'html',
        data: {
            name: $("#profile_name").val(),
            surname: $("#profile_surname").val(),
            age: $("#profile_age").val()
        },
        success: function (result) {
            console.log(result);
        },
        error: function (request, status, error) {
            serviceError();
        }
    });
});

Answer 2

您的页面正在重新加载，因为您正在使用输入type = submit提交页面。

用常规按钮替换它，它应该可以工作。

编辑：您也可以从表单标签中删除帖子。

Answer 3

如上所述，问题源于使用表单和提交按钮，一种解决方案是删除表单并提交并仅从onClick处理程序中提取数据。 我个人更喜欢留下一个有效的表格，以防万一某个人禁用了JS（很少见，但有可能），表格仍然会重新加载。

此方法要求您防止click事件的默认行为，我在jQuery AJAX处理程序之前添加了一个简单的event.preventDefault()调用。 这将防止事件的默认行为（在这种情况下，是通过邮寄提交表单），使您的处理程序无需重新加载页面即可这样做。

有关事件对象的更多信息

---

$('#send_profile').click(function(event) {
    event.preventDefault();

    $.ajax({
        global: false,
        type: 'POST',
        url: /user/change,
        dataType: 'html',
        data: {
            name: $("#profile_name").val(),
            surname: $("#profile_surname").val(),
            age: $("#profile_age").val()
        },
        success: function (result) {
            console.log(result);
        },
        error: function (request, status, error) {
            serviceError();
        }
    });
});