[英]Submit form via AJAX in jQuery
I am using following jQuery code to submit a form via AJAX. 我正在使用以下jQuery代码通过AJAX提交表单。
jQuery('form.AjaxForm').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
alert('Submitted')
},
error : function( xhr, err ) {
alert(''Error);
}
});
return false;
});
Code is working perfectly with no ajax. 代码与没有ajax完美配合。 But does not work if I load form via ajax.
但是如果我通过ajax加载表单则不起作用。 I think it is because of loading form via ajax after JavaScript load.
我认为这是因为在加载JavaScript后通过ajax加载表单。
Any solution? 有解决方案吗
If using jQuery 1.7+ you could try using .on() to delegate the event and bind to all future forms with the same class. 如果使用jQuery 1.7+,您可以尝试使用.on()委托事件并绑定到具有相同类的所有未来表单。 Try finding the closest parent that is not inserted dynamicly instead of $(document).
尝试找到未动态插入的最近父级而不是$(文档)。
$(document).on('submit', 'form.AjaxForm', function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
alert('Submitted');
},
error : function( xhr, err ) {
alert('Error');
}
});
return false;
});
You can't attach handlers directly to html that doesn't exist 您不能将处理程序直接附加到不存在的html
There are 2 ways to handle it. 有两种方法可以处理它。
Bind the handlers within success callback of ajax. 将处理程序绑定在ajax的成功回调中。
$(formParentSelector).load(formFileUrl, function() {
/* within this success callback the new html exists and can run code*/
AjaxForm();
});
function AjaxForm(){
jQuery('form.AjaxForm').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
alert('Submitted');
},
error : function( xhr, err ) {
alert('Error');
}
});
})
}
The other way is to delegate the handler to a higher level in the document so it is avalibale for future matching elements 另一种方法是将处理程序委托给文档中的更高级别,以便它可以用于将来的匹配元素
jQuery(document).on('submit','form.AjaxForm').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
alert('Submitted');
},
error : function( xhr, err ) {
alert('Error');
}
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.