如何使用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

正如上面提到的問題，從使用表單和一個提交按鈕莖，一個解決方法是刪除表格並提交，只是拉數據來自onClick處理程序。我個人寧願讓工作形式，以防萬一一個人JS禁用（罕見，但有可能）的形式將仍然具有加載提交。

此方法需要您防止click事件默認行爲，我的jQuery的AJAX處理程序之前添加了一個簡單event.preventDefault()電話。這將阻止事件的默認行爲（在這種情況下，通過提交後的形式），使您的處理程序，在無需重新加載頁面。在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(); 
     } 
    }); 
}); 

Answer 2

您的頁面正在重新加載，因爲您正在使用input type = submit提交它。

用常規按鈕代替它，它應該工作。

編輯：您可以從表單標籤後也是如此。

Answer 3

在提交默認情況下，表單數據將在表單的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(); 
     } 
    }); 
});