这篇文章主要介绍了jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法,在文中还给大家提到了jquery .ajax提交表单的写法,具体实例代码大家参考下本文
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。代替了一个一个传参的方式
以往写的ajax传参方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $.ajax({
url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition" ,
type : "post" ,
dataType : "json" ,
data: {beginsectionid: function (){
return $(& #39;#number option:selected').val();
},
beginelevation: function (){
return $(& #39;#onset').val();
},
endelevation: function (){
return $(& #39;#end').val();
}
},
success : function (result) {
}
});
|
Salin selepas log masuk
用serialize()的传参方式
1 2 3 4 5 6 7 8 9 | var param = $( "#standForm" ).serialize();
$.ajax({
url : "${ctx}/SJStandardStandardInfo/insertOrUpdateStandardInfo" ,
type : "post" ,
dataType : "json" ,
data: param,
success : function (result) {
}
});
|
Salin selepas log masuk
当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让jQuery的validator插件也可以对异步提交的表单进行验证呢?我们继续往下看。
在这里,我就用网络上的一个例子来说明好了。
下面是一个比较常见的jquery .ajax提交表单的写法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $( "#submitButton" ).click( function (){
var param = $( "#leaveSave" ).serialize();
$.ajax({
url : "leaveSave.action" ,
type : "post" ,
dataType : "json" ,
data: param,
success : function (result) {
if (result==& #39;success') {
location.href=& #39;allRequisitionList.action';
} else if (result.startWith( "error_" )){
$( "#errorMessage" ).html(result.substring(6));
} else {
var jsonObj = eval(& #39;('+result+')');
startTime = $( "#startdate" ).val();
endTime = $( "#enddate" ).val();
hour = jsonObj.hour;
reason = jsonObj.reason;
replaceDom(startTime,endTime,hour,reason);
}
}
});
});
|
Salin selepas log masuk
如果想用ajax提交表单,还想用jquery的validate进行验证,那么可以这样解决:表单还是正常编写的表单内容,type还是submit类型,只不过在validate验证通过后的方法中使用ajax提交表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $( "#saveWorkExtra" ).validate({
onsubmit: true ,
onfocusout: false ,
onkeyup : false ,
rules: {
....
},
messages:{
....
},
submitHandler: function (form) {
var param = $( "#saveToWorkExtra" ).serialize();
$.ajax({
url : "workExtraChange.action" ,
type : "post" ,
dataType : "json" ,
data: param,
success : function (result) {
if (result==& #39;success') {
location.href=& #39;allRequisitionList.action';
} else {
var jsonObj = eval(& #39;('+result+')');
}
}
});
},
invalidHandler: function (form, validator) {
return false ;
}
});
|
Salin selepas log masuk
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Ajax跨域请求的原理(图文教程)
dwz 如何去掉ajaxloading(图文教程)
Ajax 配合node js multer 实现文件上传功能
Atas ialah kandungan terperinci jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法(图文教程). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!