如何使用ajax发送数据，而不重新加载页面？（节点）答案

【问题标题】：How to send data with ajax, without reloading page? (Nodejs)如何使用ajax发送数据，而不重新加载页面？（节点）
【发布时间】：2017-03-03 20:43:32
【问题描述】：

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

这是我的表格：

        <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);
});
});

【问题讨论】：

你的网址也应该是一个字符串。 url: '/user/change',

标签： javascript ajax node.js mongodb mongoose

【解决方案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();
        }
    });
});

【讨论】：

【解决方案2】：

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

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

有关event object的更多信息

$('#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();
        }
    });
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：