jquery:表单中的ajax POST - 阻止在ajax调用上提交表单

Question

我正在尝试在表单内部执行ajax调用(Drupal节点编辑表单),但在执行调用时,它似乎由于某种原因提交表单.这是一个示例代码:

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

我可以通过在控制台中执行它来复制它,但我将其附加到表单内的按钮单击功能.在POST 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(); 
         }
        });    
      });

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调整位置)？