如何使用ajax发送数据，而无需重新加载页面？ （的NodeJS）

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

提交时默认情况下，您的表单数据将发送表单的操作属性。如果它是空的，它将在同一页面上发送数据。 为防止提交任何表单的默认功能，我们使用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

您的网页正在重新加载，因为您提交的是输入类型=提交。

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

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

Answer 3

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

此方法要求您防止click事件的默认行为，我在您的jQuery AJAX处理程序之前添加了一个简单的atom调用。它将阻止事件的默认行为（在这种情况下通过post提交表单）允许您的处理程序在不重新加载页面的情况下执行此操作。

有关event object

的更多信息

event.preventDefault()