jQuery jQuery提交表单而不重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19233254/
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 submit form without reloading page
提问by qwaz
I'm not very familiar with jQuery. I'm trying to make a form that is submitted in the background without reloading page.
我对 jQuery 不是很熟悉。我正在尝试制作一个在后台提交而不重新加载页面的表单。
I have a hidden div which shows and hides on click, inside the div there's a form.
我有一个隐藏的 div，它在点击时显示和隐藏，在 div 中有一个表单。
I have two problems:
我有两个问题：
1) When the form validation fails, the form is still submitted. I tried to put validation and submission codes in condition if(validation == valid) { $.ajax.... }but it does not work properly.
1）当表单验证失败时，表单仍然提交。我试图将验证和提交代码置于条件下，if(validation == valid) { $.ajax.... }但它无法正常工作。
2) After the form is submitted the div automatically hides, so successful message cannot be seen.
2) 表单提交后div自动隐藏，看不到成功信息。
Here's the code:
这是代码：
$().ready(function() {
// Validate the form when it is submitted, using validation plugin.
var validator = $("#contactform").validate({
errorContainer: container,
errorLabelContainer: $(),
onkeyup: false,
onclick: false,
onfocusout: false,
errorPlacement: function (error, element) {
error.insertBefore(element);
}
});
});
$(function() {
//This submits a form
$('input[type=submit]').click(function() {
$.ajax({
type: "POST",
url: "contact.php",
data: $("#contactform").serialize(),
beforeSend: function() {
$('#result').html('<img src="loading.gif" />');
},
success: function(data) {
$('#result').html(data);
}
})
})
})
//This shows and hides div onclick
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
回答by Explosion Pills
Rather than bind to the click event (input[type=submit]) you should bind to the submitevent for the form.
input[type=submit]您应该绑定到submit表单的事件，而不是绑定到单击事件 ( ) 。
$("form").on("submit", function (e) {
e.preventDefault();
I'm also not sure about the validation. If it runs asynchronously, a callback is required. If it runs synchronously, when does it get triggered? It seems like it should be done when the form is submitted unless your validation plugin does that on its own:
我也不确定验证。如果它异步运行，则需要回调。如果同步运行，什么时候触发？似乎应该在提交表单时完成，除非您的验证插件自行执行此操作：
$("form").on("submit", function (e) {
e.preventDefault();
if ($(this).validate(options)) {
$.ajax
Using e.preventDefaultwill prevent reload and should allow your success div to display.
使用e.preventDefault将防止重新加载，并应允许您的成功 div 显示。
回答by Seth McClaine
1) Use event.preventDefault();to keep the form from submitting
-http://api.jquery.com/event.preventDefault/
1)event.preventDefault();用于防止表单提交 - http://api.jquery.com/event.preventDefault/
2) There isn't anything in the given script that should be causing #result to hide, but you can try $('#result').show()and see if that brings it back
2) 给定的脚本中没有任何内容应该导致 #result 隐藏，但您可以尝试$('#result').show()看看是否可以将其恢复
回答by Jay Patel
Please check which jQuery version you are using because in after jQuery 1.8.2 "success" function from jQuery Ajax is deprecated.
请检查您使用的是哪个 jQuery 版本，因为在 jQuery 1.8.2 之后，来自 jQuery Ajax 的“成功”函数已被弃用。
Use e.preventDefault()to prevent actual submit event.
使用e.preventDefault()以防止实际提交事件。
