【jQuery学习笔记】关于jQuery1.6.1版的ajaxstart不执行问题解决方案
2011-09-13 20:08
956 查看
以前在学习jQuery的ajax时，遇到了在1.6版的ajaxStart不执行问题，在csdn上面曾经发过贴(原文)，前几天看到网友blackgull提供了jQuery1.6版的兼容方案，觉得很有必要重新整理下，便于自己查阅，以及有需要的朋友。具体代码如下：
我的想法是：发送请求后，出现加载动画，完成后动画消失。
可是得到的实际效果却是第一次有动画，第二次又没有动画了，后来根据zell419，jiangguoliao等网友的提醒，添加随机数，取消缓存，但还是失败。然后自己试了下$.ajax({cache:false})(注释部分)以及使用ajaxSetup()，还是不成功。
后来换了jquery-1.4.2版的，成功显示了。于是这里写了2种解决方案，代码如下：
1.换个库就OK
2.另一种是有csdn网友izgnaw提供的方法，对库没有限制
最后提供在jquery-1.6.1版本下，用ajaxStart实现：
在1.6.3版下也有效果。
PS： 第一次放到首页，菜鸟刚刚学习怎么写博客，如果有疏漏，欢迎大家给我批评和指正！或者给我留言！
参考资料：1.在CSDN上曾经发的贴
2.jQuery BUG Tracker
3.jQuery API -AJAX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全局Ajax事件应用示例 </title>
<style type="text/css">
button, div, li, a {
font-size: 12px;
font-family: Tahoma;
}
#loading {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
cache:false,
});
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
}).ajaxError(function(){
alert("error");
});
$("button").click(function(){
var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
$.getJSON(url,function(data){
$.each(data.stories, function(i, story){
var content =" <li> <a href='"+ story.href +"' target='_blank'>"+ story.title +" </a>";
$("#res ul").append(content);
if (i ==3)
returnfalse;
});
});
// $.ajax({
// url: url,
// data: {
// "appkey": "appkey=http%3A%2F%2Fmashup.com",
// "type": "javascript"
// },
// dataType: "jsonp",
// cache: false,
// Type: "GET",
// success: function(data){
// $.each(data.stories, function(i, story){
// var content = " <li> <a href='" + story.href + "' target='_blank'>" + story.title + " </a>";
// $("#res ul").append(content);
// if (i == 3)
// return false;
// });
// }
// })
});
});
</script>
</head>
<body>
<button>
加载数据
</button>
<div id="loading">
数据加载中... <img src="images/ajax-loader.gif"/>
</div>
<div id="res">
<ul type="square">
</ul>
</div>
</body>
</html>我的想法是：发送请求后，出现加载动画，完成后动画消失。
可是得到的实际效果却是第一次有动画，第二次又没有动画了，后来根据zell419，jiangguoliao等网友的提醒，添加随机数，取消缓存，但还是失败。然后自己试了下$.ajax({cache:false})(注释部分)以及使用ajaxSetup()，还是不成功。
后来换了jquery-1.4.2版的，成功显示了。于是这里写了2种解决方案，代码如下：
1.换个库就OK
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全局Ajax事件应用示例</title>
<style type="text/css">
button, div, li, a {
font-size: 12px;
font-family: Tahoma;
}
#loading {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
$.getJSON(url, function(data){
$.each(data.stories, function(i, story){
var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
$("#res ul").append(content);
if (i ==3)
returnfalse;
});
});
});
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>
加载数据
</button>
<div id="loading">
数据加载中...<img src="images/ajax-loader.gif"/>
</div>
<div id="res">
<ul type="square">
</ul>
</div>
</body>
</html>2.另一种是有csdn网友izgnaw提供的方法，对库没有限制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全局Ajax事件应用示例</title>
<style type="text/css">
button, div, li, a {
font-size: 12px;
font-family: Tahoma;
}
#loading {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#loading").show();
var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
$.getJSON(url,function(data){
$.each(data.stories, function(i, story){
var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
$("#res ul").append(content);
if (i ==3)
returnfalse;
$("#loading").hide();
});
});
});
});
</script>
</head>
<body>
<button>
加载数据
</button>
<div id="loading">
数据加载中...<img src="images/ajax-loader.gif"/>
</div>
<div id="res">
<ul type="square">
</ul>
</div>
</body>
</html>最后提供在jquery-1.6.1版本下，用ajaxStart实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全局Ajax事件应用示例</title>
<style type="text/css">
button, div, li, a {
font-size: 12px;
font-family: Tahoma;
}
#loading {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
19 jQuery.ajaxPrefilter(function( options ) {
20 options.global =true;
21 });
$(document).ready(function(){
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
$("button").click(function(){
console.log('abc');
var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
$.getJSON(url,function(data){
$.each(data.stories, function(i, story){
var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
$("#res ul").append(content);
if (i ==3)
returnfalse;
});
});
});
});
</script>
</head>
<body>
<button>
加载数据
</button>
<div id="loading">
数据加载中...<img src="images/ajax-loader.gif"/>
</div>
<div id="res">
<ul type="square">
</ul>
</div>
</body>
</html>在1.6.3版下也有效果。
PS： 第一次放到首页，菜鸟刚刚学习怎么写博客，如果有疏漏，欢迎大家给我批评和指正！或者给我留言！
参考资料：1.在CSDN上曾经发的贴
2.jQuery BUG Tracker
3.jQuery API -AJAX
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
- 关于SQLServer2005的学习笔记——多触发器执行问题
- 关于jquery+ajax+json+ssh框架整合，数值异步的问题（暂时解决方案--延迟加载（lazy）改为急加载）
- jquery学习笔记 ajaxStart ajaxStop
- 关于SQLServer2005的学习笔记——多触发器执行问题
- 学习笔记：关于Firefox中jQuery.ajax()返回Xml Document
- 嵌入式学习笔记--关于ARM中SWP指令的执行顺序问题【待验证】
- 关于执行ajax后页面局部刷新,无法执行jQuery问题
- 关于jquery的ajax方法之后代码和内部代码执行问题
- 关于jquery的ajax方法之后代码和内部代码执行问题
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
- JS学习笔记（五）：关于$(function(){});里面的函数不执行问题
- JSP学习笔记（十四）：关于ajax请求成功时返回的是jsonSring还是jsonObject的问题
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
- Xcode学习笔记中关于如何定义宏问题解决
- ajax执行成功返回error回调函数与jquery.sirialize()乱码问题
- 关于JQUERY的AJAX跨域问题
- PE结构学习笔记--关于AddressOfEntryPoint位置在文件中怎么确定问题
- 【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件
- jQuery学习笔记--ajax查询，jQuery解析返回的json数据 详解