zoukankan html css js c++ java

【jQuery学习笔记】关于jQuery1.6.1版的ajaxstart不执行问题解决方案

以前在学习jQuery的ajax时，遇到了在1.6版的ajaxStart不执行问题，在csdn上面曾经发过贴(原文)，前几天看到网友blackgull提供了jQuery1.6版的兼容方案，觉得很有必要重新整理下，便于自己查阅，以及有需要的朋友。具体代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2 <html xmlns="http://www.w3.org/1999/xhtml"> 
 3 <head> 
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 5 <title>全局Ajax事件应用示例 </title> 
 6 <style type="text/css"> 
 7              button, div, li, a { 
 8                  font-size: 12px; 
 9                  font-family: Tahoma; 
10 } 
11               
12              #loading { 
13                  display: none; 
14 } 
15 </style> 
16 <script type="text/javascript" src="jquery-1.6.1.js"> 
17 </script> 
18 <script type="text/javascript"> 
19              $(document).ready(function(){ 
20                  $.ajaxSetup({ 
21                      cache:false, 
22                  }); 
23                  $("#loading").ajaxStart(function(){ 
24                      $(this).show(); 
25                  }).ajaxStop(function(){ 
26                      $(this).hide(); 
27                  }).ajaxError(function(){ 
28                      alert("error"); 
29                  }); 
30                  $("button").click(function(){ 
31 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?"; 
32                      $.getJSON(url,function(data){ 
33                          $.each(data.stories, function(i, story){ 
34 var content =" <li> <a href='"+ story.href +"' target='_blank'>"+ story.title +" </a>"; 
35                              $("#res ul").append(content); 
36 if (i ==3)  
37 returnfalse; 
38                          }); 
39                      }); 
40 //                    $.ajax({ 
41 //                        url: url, 
42 //                        data: { 
43 //                            "appkey": "appkey=http%3A%2F%2Fmashup.com", 
44 //                            "type": "javascript" 
45 //                        }, 
46 //                        dataType: "jsonp", 
47 //                        cache: false, 
48 //                        Type: "GET", 
49 //                        success: function(data){ 
50 //                            $.each(data.stories, function(i, story){ 
51 //                                var content = " <li> <a href='" + story.href + "' target='_blank'>" + story.title + " </a>"; 
52 //                                $("#res ul").append(content); 
53 //                                if (i == 3)  
54 //                                    return false; 
55 //                            }); 
56 //                        } 
57 //                    }) 
58                   
59                  }); 
60              }); 
61 </script> 
62 </head> 
63 <body> 
64 <button> 
65              加载数据 
66 </button> 
67 <div id="loading"> 
68              数据加载中... <img src="images/ajax-loader.gif"/> 
69 </div> 
70 <div id="res"> 
71 <ul type="square"> 
72 </ul> 
73 </div> 
74 </body> 
75 </html>

　　我的想法是：发送请求后，出现加载动画，完成后动画消失。

　　可是得到的实际效果却是第一次有动画，第二次又没有动画了，后来根据zell419，jiangguoliao等网友的提醒，添加随机数，取消缓存，但还是失败。然后自己试了下$.ajax({cache:false})(注释部分)以及使用ajaxSetup()，还是不成功。

　　后来换了jquery-1.4.2版的，成功显示了。于是这里写了2种解决方案，代码如下：

　　1.换个库就OK

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title>全局Ajax事件应用示例</title>
 6 <style type="text/css">
 7             button, div, li, a {
 8                 font-size: 12px;
 9                 font-family: Tahoma;
10 }
11             
12             #loading {
13                 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.4.2.js">
17 </script>       
18 <script type="text/javascript">
19             $(document).ready(function(){
20                 $("button").click(function(){
21 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";                   
22                     $.getJSON(url, function(data){
23                         $.each(data.stories, function(i, story){
24 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
25                             $("#res ul").append(content);
26 if (i ==3) 
27 returnfalse;
28                         });
29                     });
30                 });
31                 $("#loading").ajaxStart(function(){
32                     $(this).show();
33                 }).ajaxStop(function(){
34                     $(this).hide();
35                 });
36             });
37 </script>
38 </head>
39 <body>
40 <button>
41             加载数据
42 </button>
43 <div id="loading">
44             数据加载中...<img src="images/ajax-loader.gif"/>
45 </div>
46 <div id="res">
47 <ul type="square">
48 </ul>
49 </div>
50 </body>
51 </html>

　　2.另一种是有csdn网友izgnaw提供的方法，对库没有限制

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title>全局Ajax事件应用示例</title>
 6 <style type="text/css">
 7             button, div, li, a {
 8                 font-size: 12px;
 9                 font-family: Tahoma;
10 }
11             
12             #loading {
13                 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.6.1.js">
17 </script>
18 <script type="text/javascript">
19             $(document).ready(function(){               
20                 $("button").click(function(){
21                     $("#loading").show();
22 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";             
23                     $.getJSON(url,function(data){
24                         $.each(data.stories, function(i, story){
25 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
26                             $("#res ul").append(content);
27 if (i ==3) 
28 returnfalse;
29                             $("#loading").hide();
30                         });
31                     });
32                 
33                 });
34             });
35 </script>
36 </head>
37 <body>
38 <button>
39             加载数据
40 </button>
41 <div id="loading">
42             数据加载中...<img src="images/ajax-loader.gif"/>
43 </div>
44 <div id="res">
45 <ul type="square">
46 </ul>
47 </div>
48 </body>
49 </html>

　　最后提供在jquery-1.6.1版本下，用ajaxStart实现：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title>全局Ajax事件应用示例</title>
 6 <style type="text/css">
 7             button, div, li, a {
 8                 font-size: 12px;
 9                 font-family: Tahoma;
10 }
11             
12             #loading {
13                 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.6.1.js">
17 </script>
18 <script type="text/javascript">
19             jQuery.ajaxPrefilter(function( options ) {
20                 options.global =true;
21             });
22             $(document).ready(function(){            
23                 $("#loading").ajaxStart(function(){
24                     $(this).show();
25                 }).ajaxStop(function(){                    
26                     $(this).hide();
27                 });
28                 $("button").click(function(){    
29                     console.log('abc');
30 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";             
31                     $.getJSON(url,function(data){
32                         $.each(data.stories, function(i, story){
33 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
34                             $("#res ul").append(content);
35 if (i ==3) 
36 returnfalse;                        
37                         });
38                     });
39                 });
40             });
41 </script>
42 </head>
43 <body>
44 <button>
45             加载数据
46 </button>
47 <div id="loading">
48             数据加载中...<img src="images/ajax-loader.gif"/>
49 </div>
50 <div id="res">
51 <ul type="square">
52 </ul>
53 </div>
54 </body>
55 </html>

　　在1.6.3版下也有效果。

PS：　第一次放到首页，菜鸟刚刚学习怎么写博客，如果有疏漏，欢迎大家给我批评和指正！或者给我留言！

参考资料：1.在CSDN上曾经发的贴

　　　　　2.jQuery BUG Tracker

　　　　　3.jQuery API -AJAX

查看全文

相关阅读:
GridView怪问题，更新时读取不到编辑后的值
 又过了一周
 虚惊一场
 [Joomla] 利用configuration.php存储简单数据
 [Joomla] Phoca Gallery 2.7去版权的方法
 SL还能做什么？
[Joomla] Joomla 1.5不支持PHP 5.3
[ecshop] 库项目的添加过程
 [Joomla] 著名CMS系统Joomla的后台图文解说
 了解Joomla

原文地址：https://www.cnblogs.com/zjczoo/p/ajaxstart.html