我试图在一个表单(Drupal节点编辑表单)中执行ajax调用,但是在执行调用时,它似乎由于某种原因提交表单.这是一个示例代码：
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",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();
}
});
});
解决方法
您需要覆盖表单的onsubmit事件以阻止提交：
$("formSelector").bind('submit',function (e) {
var isValid = someYourFunctiontocheckIfFormIsValid();
if (!isValid) {
e.preventDefault();
return false;
}
else {
jQuery.ajax({
type: "POST",data: { "text": jQuery("#edit-body").html()
},success: function (result) {
console.log(result);
}
});
e.preventDefault();
return false;
}
});
通过电话
e.preventDefault(); return false;
您可以防止发生同步回发.
更新：如果您不想覆盖表单提交,也许您可以将您的按钮放在表单标签之外(如果需要,您可以使用css调整位置)？
