jquery：表单中的ajax POST – 阻止在ajax调用上提交表单

我试图在一个表单（Drupal节点编辑表单）中执行ajax调用，但是在执行调用时，它似乎由于某种原因提交表单。 这是一个示例代码：

jQuery.ajax({ type: "POST", url: "my_custom/url", dataType: "html", data: {"text": jQuery("#edit-body").html() }, success: function(result){ console.log(result); } }); 

我可以通过在控制台中执行它来复制它，但我将其附加到表单内的按钮单击function。 在POST ajax调用上有关阻止表单提交的任何提示？

这是所要求的完整代码

  jQuery("#edit-body").before('
Check with Proofread Bot
'); jQuery("#proofread_bot-submit").click(function(event){ event.preventDefault(); jQuery("#proofread_bot-button-holder").append(""); jQuery.ajax({ type: "POST", url: "proofread_bot/check", dataType: "html", data: {"text": jQuery("#edit-' . variable_get('proofread_bot_field') . '").html() }, success: function(proofread_result){ jQuery("#proofread_bot-submit").after(proofread_result); jQuery("#proofread_bot_throbber").remove(); } }); }); 

Answer 1

您需要覆盖表单的onsubmit事件以阻止提交：

 $("formSelector").bind('submit', function (e) { var isValid = someYourFunctionToCheckIfFormIsValid(); if (!isValid) { e.preventDefault(); return false; } else { jQuery.ajax({ type: "POST", url: "my_custom/url", dataType: "html", data: { "text": jQuery("#edit-body").html() }, success: function (result) { console.log(result); } }); e.preventDefault(); return false; } }); 

通过电话

 e.preventDefault(); return false; 

您可以防止发生同步回发。

更新：如果您不想覆盖表单提交，也许您可​​以将您的按钮放在表单标签之外（如果需要，您可以使用css调整位置）？

Answer 2

如果您使用的是input type =“submit”按钮，那么您需要返回false; 在函数的末尾，以防止它提交。

另一个解决方案是按下单击按钮e.preventDefault（）

 $(".button").click(function(e){ e.preventDefault(); return false; }); 

Answer 3

您可以将提交按钮类型更改为按钮类型，并将“onclick”事件添加到该按钮。 input type =“button”value =“savebutton”onclick =“return doThisOnClick（）;”

 function doThisOnClick(){ jQuery.ajax({ type: "POST", url: "my_custom/url", dataType: "html", data: { "text": jQuery("#edit-body").html() }, success: function (result) { console.log(result); } }); } 

我认为这是最直截了当的。