如何使用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();
        }
    });
});