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