jQuery，ajaxStart不执行，ajaxSetup也不执行，跪求达人帮忙！！！

debugbird 2011-06-04 10:18:06

达人们，帮我看看啊，搞了几天了，初步判断是缓存问题，不过还是不知道怎么改？
下面附上源代码



<!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.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) 

                                return false;

                        });

                    });

                    //                    $.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>

这是开始的源代码，第一次执行有加载动画，关闭浏览器后，就没有加载动画了？

gooooooooooogle了下，发现是缓存问题，上面提供了2种方法，
这是原文链接：
http://stackoverflow.com/questions/1401117/ajaxstart-fails-on-subsequent-requests-when-using-getjson

1.使用$.ajaxSetup({ cache: false });
发现根本没执行，后来在里面加了个success方法，发现还是没有执行；

2.然后就在url后面加了随机数
这是源代码：



<!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.js">

        </script>

        <script type="text/javascript">

            $(document).ready(function(){    

			    $("#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=?d="+Math.random();

                   // var url = "http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?&d="+Math.random();

					$.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) 

                                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>

我执行了上面的两种url，的效果，发现第一个url，有加载动画，没有结果；第二个url直接403错误。

哪位达人，救救我！！小弟万分感激。。

...全文

685 25 打赏收藏转发到动态举报

写回复

用AI写文章

25 条回复

切换为时间正序

请发表友善的回复…

发表回复

blackgull 2011-09-08

打赏
举报

刚刚发现的：
加上这一句，$.ajaxPrefilter(function (options){options.global = true;});

具体原因：This is because you're doing a JSONP request。
链接：http://bugs.jquery.com/ticket/8338

debugbird 2011-09-08

打赏
举报

[Quote=引用 24 楼 blackgull 的回复:]

刚刚发现的：
加上这一句，$.ajaxPrefilter(function (options){options.global = true;});

具体原因：This is because you're doing a JSONP request。
链接：http://bugs.jquery.com/ticket/8338
[/Quote]

谢谢了啊，呵呵。学习了！

blackgull 2011-09-07

打赏
举报

我自己写了一个例子，
<script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function ()
{

$("body").ajaxStart(function ()
{
alert("Ajax Start");
});
var ajax = $.ajax(
{
url: "test.js",
type: "GET",
dataType: "script",
success: function ()
{
alert("脚本执行成功，然后到我了。");
}
});
});
</script>
只有将 $("body").ajaxStart 放到 $.ajax之前才能运行。

blackgull 2011-09-07

打赏
举报

我用的是1.6.2 版本，将
$("#loading").ajaxStart(function ()
{
$(this).show();
}).ajaxStop(function ()
{
$(this).hide();
});
放到$("button").click 之前，就可以解决。
或者换成1.4.2版本。

jonlyandyumi 2011-07-21

打赏
举报

[Quote=引用 20 楼 jiangguoliao 的回复:]
引用 16 楼 zhuzhuaipps 的回复:
暂时提供2种办法解决这个控制ajax加载动画
1.用到的是jquery-1.4.2版的，因为我用的jquery1.6.1版导致一直没有加载动画效果。只需要用1.4.2版就可以实现，下面是源代码：

JScript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio……
[/Quote]

楼主，终于搞清楚了原因了。原来这是一个bug，1.4.2的jquery库请求非本地文件时（有效果），请求本地文件时（没效果），1.6.2的jquery库则相反！有没高人已经把这个bug修改过来了,分享一下吧！

jonlyandyumi 2011-07-21

打赏
举报

[Quote=引用 16 楼 zhuzhuaipps 的回复:]
暂时提供2种办法解决这个控制ajax加载动画
1.用到的是jquery-1.4.2版的，因为我用的jquery1.6.1版导致一直没有加载动画效果。只需要用1.4.2版就可以实现，下面是源代码：

JScript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or……
[/Quote]

杯具！第一种办法一切正常，但我把url换成本地的效果只执行一次了，而我用了一下上面所说的加个随机数，如果这样写jsonpcallback=?&d="+Math.random()，请求过去了，有返回值，但效果只执行一次。如果这样写jsonpcallback=?d="+Math.random()，请求过去了，但没返回值。

debugbird 2011-06-04

打赏
举报

哈哈，大道至简嘛！！

[Quote=引用 18 楼 izgnaw 的回复:]
呵呵，我写程序一般都求简，咋个简单我就咋个做。。
[/Quote]

望仔 2011-06-04

打赏
举报

呵呵，我写程序一般都求简，咋个简单我就咋个做。。

debugbird 2011-06-04

打赏
举报

如果达人能够在1.6.1版本下，解决这个ajaxStart不执行问题，小弟拜谢！！！

debugbird 2011-06-04

打赏
举报

暂时提供2种办法解决这个控制ajax加载动画
1.用到的是jquery-1.4.2版的，因为我用的jquery1.6.1版导致一直没有加载动画效果。只需要用1.4.2版就可以实现，下面是源代码：



<!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) 

                                return false;

                        });

                    });

                });

                $("#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.还有一种就是【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) 

                                return false;

							$("#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>

zell419 2011-06-04

打赏
举报

[Quote=引用 14 楼 zhuzhuaipps 的回复:]

可能就是版本问题我想起来我把jquery1.6.1版的改成jquery名字了，试的都是1.6.1版的，
唉，悲剧！

引用 13 楼 zhuzhuaipps 的回复:
晕，居然1.4.2版的jquery 也还有几个，
你给我的链接下载的未压缩版的，有160KB，我的1.4.2版的是220+KB
小的这个版本可以出现加载动画，大的不行。

引用 11 楼 zell419 ……
[/Quote]
在你第一帖的时候我就说版本给你的代码让你试试。
可你。

debugbird 2011-06-04

打赏
举报

可能就是版本问题我想起来我把jquery1.6.1版的改成jquery名字了，试的都是1.6.1版的，
唉，悲剧！

[Quote=引用 13 楼 zhuzhuaipps 的回复:]
晕，居然1.4.2版的jquery 也还有几个，
你给我的链接下载的未压缩版的，有160KB，我的1.4.2版的是220+KB
小的这个版本可以出现加载动画，大的不行。

引用 11 楼 zell419 的回复:
引用 10 楼 zhuzhuaipps 的回复:

嗯，正如你所说的，在1.4.2中会出现动画，1.5.2没有了

引用 8 楼 zell419 的回复:
<……
[/Quote]

debugbird 2011-06-04

打赏
举报

晕，居然1.4.2版的jquery 也还有几个，
你给我的链接下载的未压缩版的，有160KB，我的1.4.2版的是220+KB
小的这个版本可以出现加载动画，大的不行。

[Quote=引用 11 楼 zell419 的回复:]
引用 10 楼 zhuzhuaipps 的回复:

嗯，正如你所说的，在1.4.2中会出现动画，1.5.2没有了

引用 8 楼 zell419 的回复:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
这里是1.……
[/Quote]

debugbird 2011-06-04

打赏
举报

这个方法不错！！！

[Quote=引用 9 楼 izgnaw 的回复:]
我一般都是点击事件的时候启动动画，然后在success里面取消动画。。没你那么复杂。。
[/Quote]

zell419 2011-06-04

打赏
举报

[Quote=引用 10 楼 zhuzhuaipps 的回复:]

嗯，正如你所说的，在1.4.2中会出现动画，1.5.2没有了

引用 8 楼 zell419 的回复:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
这里是1.4.2的地址。
[/Quote]
嗯嗯你用1.5 ，$getJSON方法，url是个本地的又行。

debugbird 2011-06-04

打赏
举报

嗯，正如你所说的，在1.4.2中会出现动画，1.5.2没有了

[Quote=引用 8 楼 zell419 的回复:]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
这里是1.4.2的地址。
[/Quote]

望仔 2011-06-04

打赏
举报

我一般都是点击事件的时候启动动画，然后在success里面取消动画。。没你那么复杂。。

zell419 2011-06-04

打赏
举报

zell419 2011-06-04

打赏
举报



<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>-->

        </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) 

                                return false;

                        });

                    });

                });

//==========

                $('#loading').ajaxStart(function(){

                    alert("ajaxStart");

                    $(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>

这段代码你分别用1.4.2 和1.5.2试下，看alter()了没有。
我这里ie6 ff效果都一致，1.4.2 弹出，1.5.2不弹出。

debugbird 2011-06-04

打赏
举报

嗯，我也试了的可以。
我的jQuery是1.6.1版的。
你可以看看这个链接，他跟我的问题是一样的！
http://stackoverflow.com/questions/1401117/ajaxstart-fails-on-subsequent-requests-when-using-getjson

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title></title>

        <script type="text/javascript" src="jquery.js">

        </script>

        <script type="text/javascript">

            $(document).ready(function(){

                $("button").click(function(){

                    $.ajaxSetup({

                        url: "ajax.txt",

                        success: function(result){

                            $("div").html(result);

                        }

                    });

                    $.ajax();

                });

            });

        </script>

    </head>

    <body>

        <div id="txt">

            <h2>通过 AJAX 改变文本</h2>

        </div>

        <button>

            改变内容

        </button>

    </body>

</html>