Javascript 使用preventDefault（）函数重新加载页面

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

主菜
罗蒂
比里亚尼
米饭

侧面
鸡
羊肉

提交

添加

在js代码中的函数结束时..这将停止正常的页面重新编码和表单提交。 试试看，告诉我添加

在js代码中的函数结束时..这将停止正常的页面重新编码和表单提交。

---

试试看，告诉我问题现在解决了。答案很好。。疯子但我无法找到根本原因。 我在一个单独的文件中编写js代码并（正确地）引用它，就像我们通常做的那样。但是，尽管这篇文章正在进行，页面仍在重新加载

---

我将js代码复制并粘贴到html页面本身的脚本标签和boom中！！这个问题现在解决了。答案很好。。疯子但我无法找到根本原因。 我在一个单独的文件中编写js代码并（正确地）引用它，就像我们通常做的那样。但是，尽管这篇文章正在进行，页面仍在重新加载

---

我将js代码复制并粘贴到html页面本身的脚本标签和boom中！！它可以工作。

您应该使用

表单。在（“提交”）

事件中，即使您成功取消了单击按钮事件，如果用户在输入一个字段时按下enter按钮，您的Ajax代码将无法工作

您应该使用

表单。在（“提交”）

事件中，在您的情况下，即使您成功取消了单击按钮事件，如果用户在输入一个输入字段时按下enter按钮，您的Ajax代码也将无法工作

是否也可以显示html代码？当您调用click事件时，提交id可能还不在dom中。如果是这种情况，请在文档上使用.on（），并绑定单击事件以提交id。嗨，还添加了HTML片段！！：）谢谢美元（“#foodForm”）.submit（函数（evt）{evt.preventDefault（）；}）怎么样；我还看到html中的按钮缺少属性type=“button”。您可以保持jQuery代码的原样，只需将前面提到的属性添加到button元素中。希望能有所帮助。嗨，我跟随了你的第二条评论，刚刚添加了type=“button”属性，奇怪的是，当我单击提交、发布或重新加载时，什么都没有发生。。就像死了一样..有可能也显示html代码吗？当您调用click事件时，提交id可能还不在dom中。如果是这种情况，请在文档上使用.on（），并绑定单击事件以提交id。嗨，还添加了HTML片段！！：）谢谢美元（“#foodForm”）.submit（函数（evt）{evt.preventDefault（）；}）怎么样；我还看到html中的按钮缺少属性type=“button”。您可以保持jQuery代码的原样，只需将前面提到的属性添加到button元素中。希望能有所帮助。嗨，我跟随了你的第二条评论，刚刚添加了type=“button”属性，奇怪的是，当我单击提交、发布或重新加载时，什么都没有发生。。就像死了一样你好，试过了但没用。唯一不同的是它没有重定向到localhost:3000/submittedData，而是停留在localhost:3000并尝试刷新页面或其他内容。但最重要的是，我不能从同一个页面发布请求（您好，尝试过但不起作用。唯一的区别是它没有重定向到localhost:3000/submittedData，但它停留在localhost:3000并尝试刷新页面或其他内容。但主要的是，我无法从同一页面发布请求。：（可能只是浏览器缓存，是否尝试禁用该功能？可能只是浏览器缓存，是否尝试禁用该功能？

  return false;