jQuery技术

jQuery学习笔记之Ajax用法实例详解(5)

字号+ 作者:H5之家 来源:H5之家 2016-12-25 16:03 我要评论( )

function jqAjaxTest() { var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件 $.post(jqRequestUrl + "action=jquery", { userName: "jeff wong", location

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 请求。

示例

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记之jQuery中的$

    jQuery学习笔记之jQuery中的$

    2016-12-25 17:00

  • 基于jquery实现即时检查格式是否正确的表单

    基于jquery实现即时检查格式是否正确的表单

    2016-12-25 15:00

  • jquery处理xml

    jquery处理xml

    2016-12-25 14:01

  • jQuery EasyUI如何给Combobox附加项option?

    jQuery EasyUI如何给Combobox附加项option?

    2016-12-25 14:00

网友点评