jQuery全局Ajax事件处理器

简介:

1.  .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

每当一个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 事件。

示例与上面差不多。

转载;http://www.cnblogs.com/zqzjs/p/4787123.html

目录
相关文章
|
6月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
38 1
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
51 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
126 1
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
36 1
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
22 0
|
3月前
|
JavaScript
jQuery 事件
jQuery 事件
40 10
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
36 3
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
27 1