jquery:ajax在表单中发布-防止在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);
     }
    });  

我可以通过在控制台中执行它来复制它，但是我将它附加到表单中的按钮单击函数。有没有关于防止表单提交的技巧，在ajax调用后

这是要求的完整代码

        jQuery("#edit-body").before('<div id="proofread_bot-button-holder"><button type="button"  id="proofread_bot-submit" onclick="return false;">Check with Proofread Bot</button></div>'); 
    jQuery("#proofread_bot-submit").click(function(event){
      event.preventDefault();
      jQuery("#proofread_bot-button-holder").append("<img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" />");

      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(); 
         }
        });    
      });

jQuery（#编辑体”）。在（'Check with校对机器人'）之前；
jQuery（“校对”\u bot-submit”）。单击（函数（事件）{
event.preventDefault（）；
jQuery（“#校对#bot-button-holder”）。追加（“”）；
jQuery.ajax({
类型：“POST”，
url:“校对/检查”，
数据类型：“html”，
数据：{“text”：jQuery（#edit-'.variable_get（'校对#bot_字段'））。“”.html（）
},
成功：功能（校对结果）{
jQuery（“#校对#bot-submit”）。之后（校对#结果）；
jQuery（“校对者”）.remove（）；
}
});    
});

如果您使用的是输入type=“submit”按钮，则需要执行返回false在函数末尾，以防止其提交

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

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

---

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

$（“formSelector”）.bind（'submit'，函数（e）{
var isValid=someyourFunctiontocheckiformisvalid（）；
如果（有效）{
jQuery.ajax({
类型：“POST”，
url:“我的自定义/url”，
数据类型：“html”，
数据：{“text”：jQuery（#编辑体”）.html（）
},
成功：功能（结果）{
控制台日志（结果）；
}
});
}
e、 预防默认值（）；
返回false；
});

打电话

e.preventDefault();
return false;

您可以防止发生同步回发

更新：

---

如果你不想覆盖表单提交，也许你可以把你的按钮放在表单标签的外面（如果有必要，你可以用css调整位置）？

你可以将提交按钮类型更改为一个按钮类型，并将“onclick”事件添加到该按钮上。 输入type=“button”value=“savebutton”onclick=“return doThisOnClick（）；”

---

我认为这是最简单的。

上传buttonThanks Goran的代码，这看起来很有希望。在验证功能中，我如何检查帖子或单击是否来自我的按钮而不是提交按钮？我认为这可以解决问题。由于e.sourceElement包含事件传播所通过的所有元素的集合，您可以使用$（“input[type=submit]”，e.sourceElement）来实现这一点，前提是您的按钮是submit类型的输入（如有必要，请调整选择器）

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

}