为什么我的 FORM 在 Ajax 调用后被提交？ [复制]答案

【问题标题】：Why does my FORM get submitted after an Ajax call? [duplicate]为什么我的 FORM 在 Ajax 调用后被提交？ [复制]
【发布时间】：2017-11-15 14:03:22
【问题描述】：

我有以下几点：

<form id="form" action="xxx" method="get">
  <input type="checkbox" name="cb">
  <button onclick="update();">Update</button>
</form>

<script>
  function update() {
    var data = $("#form").serialize();
    $.ajax( {
      url: "/api/m/x",
      type: "post",
      data: data
      }
     ).done(function(results,status) {
          alert(status);
       }).fail(function(error, status) {
          alert(status);
      });
   }
</script>

当我单击“更新”按钮时，Ajax 调用被发送到 /api/m/x 并触发了其中一个警报。到目前为止，一切都很好。但是，在我关闭警报对话框后，表单已提交！浏览器发送到xxx?cb=on，例如，如果我勾选了复选框。

为什么会这样？我的表单没有 <input type='submit'> 元素。谁触发了表单的提交？

我尝试将return false; 添加到update 函数，但行为仍然相同。

【问题讨论】：

你的成功在哪里
那是done 对吧？
因为你没有做任何事情来阻止它被提交
试试
你有使用内联处理程序的原因吗？此外，您需要将处理程序视为 function(){update()} 的等效项，这应该会告诉您为什么 update 函数中的 return false; 不起作用。

标签： jquery ajax

【解决方案1】：

表单中的<button> 标记是提交按钮，除非您指定type=button
return false 也应该在 onsubmit 事件上

<form id="form" action="xxx" method="get" onsubmit="return update();">

function update() {
...
    return false;
}

【讨论】：

【解决方案2】：

如果表单中有按钮，则单击此按钮时正在提交表单

试试这样：

<form onsubmit="update();return false;">

【讨论】：