jquery——全局事件

時間 2019-11-09

標籤 jquery 全局事件欄目 JQuery 简体版

原文原文鏈接

query中各個事件執行順序以下：javascript

1.ajaxStart(全局事件)html

2.beforeSend(局部事件)java

3.ajaxSend(全局事件)jquery

4.success(局部事件)ajax

5.ajaxSuccess(全局事件)ui

6.error(局部事件)this

7.ajaxError (全局事件)url

8.complete(局部事件)spa

9.ajaxComplete(全局事件).net

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。