Question

我正在使用jquery ajax将表单发布到我的node.js服务器。我试图阻止页面刷新（因为尝试开发SPA）使用preventDefault函数，但令人惊讶的是它重定向。而且，数据传输到节点快速服务器非常顺利。但不知何故，它似乎正在跳过几行。当我在一个基本的POC中尝试这个时，一切正常，它阻止了页面刷新。

 $(document).ready(function(){
$('#submit').click(function(event){
//$("form#foodForm").submit(function(event) {
window.alert( event.isDefaultPrevented() );
event.preventDefault();
window.alert( event.isDefaultPrevented() );
  console.log("form submitted");
   // Prevents the page from refreshing
  var $this = $(this); // `this` refers to the current form element
  $.post(
      '/submittedData', // Gets the URL to sent the post to
      $this.serialize(), // Serializes form data in standard format
      function(data) {
      console.log(data); /** code to handle response **/ },
      "json" // The format the response should be in
  );
});

});

app.js代码：

    app.post('/submittedData',function(req,res){
  console.log('body: ' + JSON.stringify(req.body));
});

HTML片段：

<form id="foodForm" action="/submittedData" method="post">

   <ul> Main course
   <li> <input type="checkbox" name="items[]" value="roti">Roti </li>
    <li><input type="checkbox" name="items[]" value="biryani">Biryani</li>
    <li><input type="checkbox" name="items[]" value="rice">Rice</li>
    </ul>
    <ul> On the side
    <li><input type="checkbox" name="items[]" value="chicken">Chicken</li>
    <li><input type="checkbox" name="items[]" value="mutton">Mutton</li>
    </ul>


<button id="submit">Submit</button>
  <!-- <input type="submit" value="submit" id="submit" > -->

</form>

Answer 1

添加

  return false;

在你的函数的最后js代码..这将停止正常的页面重新编码和表单提交。试试吧告诉我

Answer 2

问题现在解决了。答案很好......疯了。但我无法找到根本原因。我正在将js代码写在一个单独的文件中并正确地引用它（就像我们通常那样）。但是，虽然帖子正在发生，但页面正在重新加载。

我将js代码复制并粘贴在html页面本身的脚本标签和繁荣中！它有效..

Answer 3

你应该使用form.on("submit")事件，即使你成功取消了点击按钮事件，如果用户在键入输入字段时按下了输入按钮，你的Ajax代码将无法正常工作

尽管使用了preventDefault（）函数，页面重新加载

3 个答案: