jQuery学习笔记之Ajax用法详解(4)_H5之家 - 中国HTML5教程资源分享第一站

　　示例

1 function jqAjaxTest() { 2 var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错引发ajaxError事件 3 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); 4 } 5 //AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以) 6 $("#divResult").ajaxError(function(event, request, settings) { 7 $("#divResult").css("display", "block"); 8 $("#divResult").css("color", "red"); 9 $(this).append("<br/>出错页面:" + settings.url); 10 }); 11 function jqPostCallBack(oData) { 12 //在div中显示所有数据 13 $("#divResult").html(oData); 14 $("#divResult").css("display", "block"); 15 $("#divResult").css("color", "red"); 16 }

　　3、ajaxSend(callback)

　　AJAX 请求发送前执行函数。Ajax 事件。

　　XMLHttpRequest 对象和设置作为参数传递给回调函数。

　　返回值 jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

1 function jqAjaxTest() { 2 var jqRequestUrl = "AjaxHandler.ashx"; 3 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); 4 } 5 //AJAX 请求发送前执行函数 6 $("#divResult").ajaxSend(function(evt, request, settings) { 7 $("#divResult").css("display", "block"); 8 $("#divResult").css("color", "red"); 9 $(this).append("<br/>开始请求: " + settings.url + "<br/>"); 10 }); 11 function jqPostCallBack(oData) { 12 //在div中显示所有数据 13 $("#divResult").append(oData); 14 $("#divResult").css("display", "block"); 15 $("#divResult").css("color", "red"); 16 }

　　4、ajaxStart(callback)

　　AJAX 请求开始时执行函数。Ajax 事件。

　　返回值 jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

1 function jqAjaxTest() { 2 var jqRequestUrl = "AjaxHandler.ashx"; 3 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); 4 } 5 //AJAX 请求开始时执行函数 6 $("#divResult").ajaxStart(function() { 7 $("#divResult").css("display", "block"); 8 $("#divResult").css("color", "red"); 9 $(this).append("<br/>请求开始了<br/>"); 10 }); 11 function jqPostCallBack(oData) { 12 //在div中显示所有数据 13 $("#divResult").append(oData); 14 $("#divResult").css("display", "block"); 15 $("#divResult").css("color", "red"); 16 }

　　5、ajaxStop(callback)

　　AJAX 请求结束时执行函数。Ajax 事件。

　　返回值 jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

1 function jqAjaxTest() { 2 var jqRequestUrl = "AjaxHandler.ashx"; 3 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); 4 } 5 //AJAX 请求开始时执行函数 6 $("#divResult").ajaxStop(function() { 7 $(this).append("<br/>请求已经结束了<br/>"); 8 }); 9 function jqPostCallBack(oData) { 10 //在div中显示所有数据 11 $("#divResult").append(oData); 12 $("#divResult").css("display", "block"); 13 $("#divResult").css("color", "red"); 14 }

　　6、ajaxSuccess(callback)

　　AJAX 请求成功时执行函数。Ajax 事件。

　　XMLHttpRequest 对象和设置作为参数传递给回调函数。

　　返回值 jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

1 function jqAjaxTest() { 2 var jqRequestUrl = "AjaxHandler.ashx"; 3 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); 4 } 5 //AJAX 请求成功时执行函数 6 $("#divResult").ajaxSuccess(function(evt, request, settings) { 7 $(this).append("<br/>请求成功<br/>"); 8 $(this).append(settings.url); 9 }); 10 function jqPostCallBack(oData) { 11 //在div中显示所有数据 12 $("#divResult").append(oData); 13 $("#divResult").css("display", "block"); 14 $("#divResult").css("color", "red"); 15 }

三、其他

　　1、jQuery.ajaxSetup(options)

　　设置全局 AJAX 默认选项。

　　参数见 '$.ajax' 说明。

　　返回值 jQuery

　　参数

　　options (可选) : 选项设置。所有设置项均为可选设置。

　　示例

1 //设置 AJAX 请求默认地址为 "AjaxHandler.ashx"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 2 $.ajaxSetup({ 3 url: "AjaxHandler.ashx", 4 global: false, 5 type: "POST" 6 });

　　2、serialize()

　　序列化表单内容为字符串。

　　返回值 jQuery

　　参数

　　序列化表单内容为字符串，用于 Ajax 请求。

　　示例

1 $(document).ready(function() { 2 var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串 3 $("#results").append("<tt>" + oSerializedStr + "</tt>"); 4 });

　　文档片段

1 <body> 2 <p> 3 <b>Results: </b> 4 </p> 5 <form> 6 <select> 7 <option>Single</option> 8 <option>Single2</option> 9 </select> 10 <select multiple="multiple"> 11 <option selected="selected">Multiple</option> 12 <option>Multiple2</option> 13 <option selected="selected">Multiple3</option> 14 </select><br /> 15 <input type="checkbox" value="check1" /> 16 check1 17 <input type="checkbox" value="check2" checked="checked" /> 18 check2 19 <input type="radio" value="radio1" checked="checked" /> 20 radio1 21 <input type="radio" value="radio2" /> 22 radio2 23 </form> 24 <script src="js/jQTest.js" type="text/javascript"></script> 25 </body>

　　3、serializeArray()

　　序列化表单内容，返回 JSON 数据结构数据。

　　返回值 jQuery

　　参数

　　序列化表单内容为JSON ，用于 Ajax 请求。