为啥我的 FORM 在 Ajax 调用后被提交？ [复制]

Posted 2023-02-22

【中文标题】为啥我的 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; 不起作用。

【参考方案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;">