jquery：表单内的ajax POST - 防止在ajax调用时提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8121958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: ajax POST inside a form - prevent form submission on ajax call
提问by giorgio79
I am trying to perform an ajax call inside a form (a Drupal node edit form) , but it seems when performing the call, it submits the form for some reason. Here is a sample code:
我正在尝试在表单（Drupal 节点编辑表单）中执行 ajax 调用，但似乎在执行调用时，它出于某种原因提交了表单。这是一个示例代码：
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: {"text": jQuery("#edit-body").html()
},
success: function(result){
console.log(result);
}
});
I can replicate this just by executing it in the console, but I attach this to a button click function inside the form. Any tips on preventing the form from submitting, on a POST ajax call?
我可以通过在控制台中执行它来复制它，但我将它附加到表单内的按钮单击功能。在 POST ajax 调用中阻止表单提交的任何提示？
Here is the full code as requested
这是要求的完整代码
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();
}
});
});
回答by Goran Obradovic
You need to override form's onsubmit event to prevent submitting:
您需要覆盖表单的 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;
}
});
By calling
通过调用
e.preventDefault();
return false;
You prevent synchronous postback from occurring.
您可以防止发生同步回发。
UPDATE: If you don't want to override form submit, maybe you could place your button outside of form tag (you can adjust position with css if necessary)?
更新：如果您不想覆盖表单提交，也许您可以将按钮放在表单标签之外（如有必要，您可以使用 css 调整位置）？
回答by Niels
If you are using a input type="submit"button, then you need to do a return false;at the end of the function to prevent it from submitting.
如果你使用的是input type="submit"按钮，那么你需要做一个return false; 在函数的末尾以防止它提交。
Another solution is to e.preventDefault()on the button click
另一个解决方案是e.preventDefault()在按钮上单击
$(".button").click(function(e){
e.preventDefault();
return false;
});
回答by Kishore
you can change submit button type to just a button type and add "onclick" event to that button. input type="button" value="savebutton" onclick="return doThisOnClick();"
您可以将提交按钮类型更改为仅按钮类型，并将“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);
}
});
}
I think this is most straightforward.
我认为这是最直接的。
