function jqAjaxTest() { var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件 $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); } //AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以) $("#divResult").ajaxError(function(event, request, settings) { $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); $(this).append("<br/>出错页面:" + settings.url); }); function jqPostCallBack(oData) { //在div中显示所有数据 $("#divResult").html(oData); $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); }
3、ajaxSend(callback)
AJAX 请求发送前执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。
返回值 jQuery
参数
callback (Function) : 待执行函数
示例
function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); } //AJAX 请求发送前执行函数 $("#divResult").ajaxSend(function(evt, request, settings) { $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); $(this).append("<br/>开始请求: " + settings.url + "<br/>"); }); function jqPostCallBack(oData) { //在div中显示所有数据 $("#divResult").append(oData); $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); }
4、ajaxStart(callback)
AJAX 请求开始时执行函数。Ajax 事件。
返回值 jQuery
参数
callback (Function) : 待执行函数
示例
function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); } //AJAX 请求开始时执行函数 $("#divResult").ajaxStart(function() { $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); $(this).append("<br/>请求开始了<br/>"); }); function jqPostCallBack(oData) { //在div中显示所有数据 $("#divResult").append(oData); $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); }
5、ajaxStop(callback)
AJAX 请求结束时执行函数。Ajax 事件。
返回值 jQuery
参数
callback (Function) : 待执行函数
示例
function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); } //AJAX 请求开始时执行函数 $("#divResult").ajaxStop(function() { $(this).append("<br/>请求已经结束了<br/>"); }); function jqPostCallBack(oData) { //在div中显示所有数据 $("#divResult").append(oData); $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); }
6、ajaxSuccess(callback)
AJAX 请求成功时执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。
返回值 jQuery
参数
callback (Function) : 待执行函数
示例
function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); } //AJAX 请求成功时执行函数 $("#divResult").ajaxSuccess(function(evt, request, settings) { $(this).append("<br/>请求成功<br/>"); $(this).append(settings.url); }); function jqPostCallBack(oData) { //在div中显示所有数据 $("#divResult").append(oData); $("#divResult").css("display", "block"); $("#divResult").css("color", "red"); }
三、其他
1、jQuery.ajaxSetup(options)
设置全局 AJAX 默认选项。
参数见 '$.ajax' 说明。
返回值 jQuery
参数
options (可选) : 选项设置。所有设置项均为可选设置。
示例
//设置 AJAX 请求默认地址为 "AjaxHandler.ashx",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 $.ajaxSetup({ url: "AjaxHandler.ashx", global: false, type: "POST" });
2、serialize()
序列化表单内容为字符串。
返回值 jQuery
参数
序列化表单内容为字符串,用于 Ajax 请求。
示例
$(document).ready(function() { var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串 $("#results").append("<tt>" + oSerializedStr + "</tt>"); });
文档片段:
<body> <p> <b>Results: </b> </p> <form> <select> <option>Single</option> <option>Single2</option> </select> <select multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br /> <input type="checkbox" value="check1" /> check1 <input type="checkbox" value="check2" checked="checked" /> check2 <input type="radio" value="radio1" checked="checked" /> radio1 <input type="radio" value="radio2" /> radio2 </form> <script src="js/jQTest.js" type="text/javascript"></script> </body>
3、serializeArray()
序列化表单内容,返回 JSON 数据结构数据。
返回值 jQuery
参数
序列化表单内容为JSON ,用于 Ajax 请求。
示例