码迷,mamicode.com
首页 > Web开发 > 详细

jquery——全局事件

时间:2016-08-08 22:24:27      阅读:425      评论:0      收藏:0      [点我收藏+]

标签:

query中各个事件执行顺序如下:

1.ajaxStart(全局事件)

2.beforeSend(局部事件)

3.ajaxSend(全局事件)

4.success(局部事件)

5.ajaxSuccess(全局事件)

6.error(局部事件)

7.ajaxError (全局事件)

8.complete(局部事件)

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

 

其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地方)。

下例演示一次ajax请求过程中各个事件执行的顺序,以及全局ajax的使用方法。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2                     "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <script src="jquery-3.1.0.min.js"></script>
 8     <script type="text/javascript">
 9     $(function() {
10         $("#ajaxReuqestID").click(function() {
11             $.ajax({
12                 url: "http://blog.csdn.net/gaoyusi4964238",
13                 beforeSend: function() {
14                     $("#ajaxStateID").text("berforeSend");
15                     alert("berforeSend");
16                 },
17                 success: function() {
18                     $("#ajaxStateID").text("success");
19                     alert("success");
20                 },
21                 error: function() {
22                     $("#ajaxStateID").text("error");
23                     alert("error");
24                 },
25                 complete: function() {
26                     $("#ajaxStateID").text("complete");
27                     alert("complete");
28                 }
29             });
30         });
31 
32         $("#ajaxStateID").ajaxStart(function() {
33             $(this).text("ajaxStart");
34             alert("ajaxStart");
35         }).ajaxSend(function() {
36             $(this).text("ajaxSend");
37             alert("ajaxSend");
38         }).ajaxSuccess(function() {
39             $(this).text("ajaxSuccess");
40             alert("ajaxSuccess");
41         }).ajaxError(function() {
42             $(this).text("ajaxError");
43             alert("ajaxError");
44         }).ajaxComplete(function() {
45             $(this).text("ajaxComplete");
46             alert("ajaxComplete");
47         }).ajaxStop(function() {
48             $(this).text("ajaxStop");
49             alert("ajaxStop");
50         });
51     })
52     </script>
53 </head>
54 
55 <body>
56     <input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
57     <div id="ajaxStateID"></div>
58 </body>
59 
60 </html>

 

jquery——全局事件

标签:

原文地址:http://www.cnblogs.com/m-liuy/p/5750939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!