如何结合Jquery 的validate 和 ajax submit进行工作

Question

如题所述

Answer 1

在jquery 中使用ajax方式进行异步调用有3种方式：$.post、$.get、$.ajax.

　　其中$.post、$.get是封装的$.ajax方法。处理一些较为简单的ajax请求，参数少的情况。

　　如果遇到复杂数据传输，或者对传输配置参数需要定义，就需要$.ajax了。

　　一、$.ajax的一般格式

　　$.ajax({

　　type: 'POST',

　　url: url ,

　　data: data ,

　　success: success ,

　　dataType: dataType

　　});

　　二、$.ajax的参数描述

　　参数 描述

　　
　　
　　url 必需。规定把请求发送到哪个 URL。
　　data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
　　success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
　　dataType 可选。规定预期的服务器响应的数据类型。

　　默认执行智能判断（xml、json、script 或 html）。
　　

　　三、$.ajax需要注意的一些地方：

　　1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；

　　通过dataType指定，不指定智能判断。

　　2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,

　　需要使用jquery.form.js的$.ajaxSubmit

　　四、代码实例。

　　1.$.ajax带json数据的异步请求

　　1 <SPAN style="FONT-FAMILY: 微软雅黑, 'Microsoft YaHei'; FONT-SIZE: 14px"> var inputMac = $("#inputMac").val();<BR> var selectType = $("#selectType").val();<BR> var selectStatus = $("#selectStatus").val(); <BR> $.ajax({<BR> type: "post",<BR> dataType: 'json',<BR> url: AjaxUrl,<BR> data: {<BR> mac: inputMac,<BR> status: selectStatus,<BR> type: selectType<BR> },<BR> success: function (data, textStatus) {<BR> if (data != null) {<BR> <BR> var ap = eval(data);<BR> if (ap != null && ap!="undefined" && ap.Id>0) {<BR> //window.location.href = 'index.aspx';<BR> alert("添加成功。"); return;<BR> }<BR> else {<BR> alert("添加失败，请检查输入是否正确。"); return;<BR> }<BR> }<BR> },<BR> complete: function (XMLHttpRequest, textStatus) {<BR><BR> },<BR> error: function (e) {<BR> alert("添加失败，请检查输入是否正确。"); return;<BR> }<BR> });<BR></SPAN>

　　2.$.ajax序列化表格内容为字符串的异步请求

　　使用方法是： var formParam = $("#form1").serialize();//序列化表格内容为字符串 。

　　将formParam作为data传递给服务器。

　　serialize() 与 serializeArray()

　　serialize() : 序列表表格内容为字符串。

　　serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

　　1 <SPAN style="FONT-FAMILY: 微软雅黑, 'Microsoft YaHei'; FONT-SIZE: 14px"> var formParam = $("#form1").serialize();//序列化表格内容为字符串 <BR> $.ajax({ <BR> type:'post', <BR> url:'Notice_noTipsNotice', <BR> data:formParam, <BR> cache:false, <BR> dataType:'json', <BR> success:function(data){ <BR> } <BR> });<BR></SPAN>

　　3.$.ajax拼接url的异步请求

　　1 <SPAN style="FONT-FAMILY: 微软雅黑, 'Microsoft YaHei'; FONT-SIZE: 14px">var yz=$.ajax({ <BR> type:'post', <BR> url:'validatePwd2_checkPwd2?password2='+password2, <BR> data:{}, <BR> cache:false, <BR> dataType:'json', <BR> success:function(data){ <BR> if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 <BR> { <BR> textPassword2.html("<font color='red'>业务密码不正确！</font>"); <BR> $("#validatePassword2").val("pwd2Error"); <BR> checkPassword2 = false; <BR> return; <BR> } <BR> }, <BR> error:function(){} <BR>});<BR></SPAN>

　　4.$.ajax拼接data的异步请求

　　1 <SPAN style="FONT-FAMILY: 微软雅黑, 'Microsoft YaHei'; FONT-SIZE: 14px">$.ajax({ <BR> url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', <BR> type:'post', <BR> data:'merName='+values, <BR> async : false, //默认为true 异步 <BR> error:function(){ <BR> alert('error'); <BR> }, <BR> success:function(data){ <BR> $("#"+divs).html(data); <BR> }<BR>});<BR></SPAN>