jQuery全局Ajax事件处理器
2015-09-06 20:49
656 查看
1. .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )
每当一个Ajax请求完成,jQuery就会触发
效果前:
效果后:
2. .ajaxError(function(event,xhr,options,exc))
ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。
效果前:
效果后:
3. .ajaxSend([function(event,xhr,options)])
ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。
效果前:
效果后:
4. .ajaxStart(function())
ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。
无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。
示例与上面差不多。
5. .ajaxStop(function())
ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。
效果前:
效果后:
6. .ajaxSuccess(function(event,xhr,options))
ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。
示例与上面差不多。
每当一个Ajax请求完成,jQuery就会触发
ajaxComplete事件,在这个时间点所有处理函数会使用
.ajaxComplete()方法注册并执行。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#txt").ajaxStart(function(){ $("#wait").css("display","block"); }); $("#txt").ajaxComplete(function(){ $("#wait").css("display","none"); }); $("button").click(function(){ $("#txt").load("/example/jquery/demo_ajax_load.asp"); }); }); </script> </head> <body> <div id="txt"><h2>通过 AJAX 改变文本</h2></div> <button>改变内容</button> </body> </html>
效果前:
效果后:
2. .ajaxError(function(event,xhr,options,exc))
ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").ajaxError(function(){ alert("发生错误!"); }); $("button").click(function(){ $("div").load("wrongfile.txt"); }); }); </script> </head> <body> <div id="txt"><h2>通过 AJAX 改变文本</h2></div> <button>改变内容</button> </body> </html>
效果前:
效果后:
3. .ajaxSend([function(event,xhr,options)])
ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").ajaxSend(function(e,xhr,opt){ $(this).html("正在请求:" + opt.url); }); $("button").click(function(){ $("div").load("/example/jquery/demo_ajax_load.asp"); }); }); </script> </head> <body> <div id="txt"><h2>通过 AJAX 改变文本</h2></div> <button>改变内容</button> </body> </html>
效果前:
效果后:
4. .ajaxStart(function())
ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。
无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。
示例与上面差不多。
5. .ajaxStop(function())
ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").ajaxStop(function(){ alert("所有 AJAX 请求已完成"); }); $("button").click(function(){ $("div").load("/example/jquery/demo_ajax_load.txt"); $("div").load("/example/jquery/demo_ajax_load.asp"); }); }); </script> </head> <body> <div id="txt"><h2>通过 AJAX 改变文本</h2></div> <button>改变内容</button> </body> </html>
效果前:
效果后:
6. .ajaxSuccess(function(event,xhr,options))
ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。
示例与上面差不多。
相关文章推荐
- jquery中val()方法是从最后一个选项往前读取的
- 百度天气api初体验
- 用JQuery中的方法实现跨域请求
- jquery插件集合
- jQuery.reveal弹出层使用
- JQuery中Ajax的Post提交中文乱码的解决方案
- jquery 扩展方法
- jQuery 实现 九九乘法表
- 基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
- 解决$.ajax()请求异常~ jQuery提示parsererror错误解决办法
- jQuery横向擦除焦点图特效代码分享
- jquery封装的时间轴
- jquery无缝滚动效果
- jquery删除操作option
- jquery浮动定位层导航描点上下滚动的浮动导航
- jquery的优势
- jQuery Ajax 跨域请求
- jQuery实现美观的多级动画效果菜单代码
- jQuery使用get()方法访问经典的DOM
- jquery选择器