尽管使用了 preventDefault() 函数，但页面重新加载答案

【问题标题】：Page reloading inspite of using preventDefault() function尽管使用了 preventDefault() 函数，但页面重新加载
【发布时间】：2016-11-07 09:04:11
【问题描述】：

我正在使用 jquery ajax 将表单发布到我的 node.js 服务器。我正在尝试使用 preventDefault 函数防止页面刷新（因为尝试开发 SPA），但令人惊讶的是它正在重定向。而且，数据正在非常顺利地传递到节点快递服务器。但不知何故，它似乎跳过了几行。当我在基本 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>

【问题讨论】：

是否也可以显示html代码？当您调用 click 事件时，提交 id 可能尚未在 dom 中。如果是这种情况，可能在文档上使用 .on() 并将点击事件绑定到提交 ID。
您好，还添加了 HTML 片段！！ :)
谢谢。 $("#foodForm").submit(function(evt){evt.preventDefault();}); 怎么样
我还看到 html 按钮缺少属性 type="button"。您可以保持 jQuery 代码原样，只需将前面提到的属性添加到您的按钮元素。希望对您有所帮助。
嗨，我关注了你的第二条评论，只是添加了 type="button" 属性，奇怪的是，当我点击提交时，什么都没有发生，既没有发布，也没有重新加载..就像死了一样。。

标签： javascript jquery ajax node.js single-page-application

【解决方案1】：

添加

  return false;

在你的 js 代码中的函数的末尾..这将停止正常的页面重新加载和表单提交。试试看告诉我

【讨论】：

您好，试过了，没用。它所做的唯一区别是它没有重定向到 localhost:3000/submittedData，而是停留在 localhost:3000 并尝试刷新页面或其他内容。但主要的是我无法从同一页面发布请求。 :(

【解决方案2】：

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

我将 js 代码复制并粘贴到 html 页面本身的脚本标签内，然后砰！它有效..

【讨论】：

可能只是浏览器缓存，尝试禁用它？

【解决方案3】：

您应该使用 form.on("submit") 事件，即使您成功取消了单击按钮事件，如果用户在输入字段之一时按下回车按钮，您的 Ajax 代码也将不起作用

【讨论】：