Question

我的页面上有多个ajax请求，并且每个我希望在响应之前显示不同的进度条。在下面的代码中，第一次单击时没有显示“第二”进度条，它出现在第三个。可能是什么原因？

您可以在这里查看jsfiddle：https://jsfiddle.net/narya/zheeuoyu/#&togetherjs=vxl7Hllw5m

这是xml文件：https://www.dropbox.com/s/0oxkmj8bgt0muma/testAja.xml?dl=0

“TestB.xml”是此文件的副本，如果您需要检查，您只需复制和粘贴即可。请考虑使用大于400 Kb的xml文件来观察加载条。谢谢

编辑代码：23.06.2016 11:15

 <script>
    $(document).ready(function () {
        $("#second").click(function () {
            $.ajax({
                beforeSend: function(){
                    $('#loadCompCountry').css("display", "block");
                },
                complete: function(){
                    $('#loadCompCountry').css("display", "none");
                },
                type: "GET",
                url: "testAja.xml",
                dataType: "xml",
                success: function (xml) {
                    $("#CompCountry").append("<ul></ul>");
                    $(xml).find('CD').each(function () {
                        var cdCountry = $(this).find('COUNTRY').text();
                        var cdComp = $(this).find('COMPANY').text();
                        $("<li></li>").html(cdCountry + ' , ' + cdComp).appendTo("#CompCountry");
                    });
                },
                error: function () {
                    alert("top req ");
                }
            });    
        });

        $("#third").click(function () {
           $.ajax({
               beforeSend: function(){
                   $("#loadTitleArtist").css("display", "block");
               },
               complete: function(){
                   $("#loadTitleArtist").css("display", "none");
               },
                type: "GET",
                url: "testB.xml",
                dataType: "xml",
                success: function (xml) {
                    $("#titleArtist").append("<ul></ul>");
                    $(xml).find('CD').each(function () {
                        var cdTitle = $(this).find('TITLE').text();
                        var cdArtist = $(this).find('ARTIST').text();
                        $("<li></li>").html(cdTitle + ' , ' + cdArtist).appendTo("#titleArtist")
                    });
                },
                error: function () {
                    alert("nonono ");
                }
            });
        });

    });

</script>

多个按钮的JQuery进度条

0 个答案: