Question

当我更改组合框时，我成功地创建了一个生成2个ajax请求的页面... 我也得到了加载div工作，但它似乎只在第一次调用时工作，第二个ajax div在加载的div消失后刷新...

这是我的代码：

        /*first call----------*/
        $(document).ready(function()

        {

        $(".drop").change(function()

        {

        $(document).ajaxStart(function(){

        $("#wait").css("display","block");

        });

        $(document).ajaxComplete(function(){

        $("#wait").css("display","none");

         });


        var id=$(this).val();
        var dataString = '1level='+ id;



        $.ajax

        ({

        type: "POST",

        url: "call2.php",

        data: dataString,

        cache: false,

        success: function(html)

        {

        $(".tab2").html(html);

        $(".tab1").text(id);

        $(".tab3").text("");


        /*second call*/
        $.ajax

        ({

        type: "POST",

        url: "names.php",

        data: dataString,

        cache: false,

        success: function(html)

        $("#names").css("display","block");

        $(".names").html(html);         
        {

        $(document).ajaxStart(function(){

        $("#wait").css("display","block");

        });

        $(document).ajaxComplete(function(){

        $("#wait").css("display","none");

         });

        }

        });

        }

        })

        });

        });

我想在每次加载数据时加载动画，在动画停止后加载第二个...

提前感谢...;）

Answer 1

此代码存在许多问题。首先，所有额外的间距，不应该存在的地方的新行，不正确的缩进等导致第二个ajax请求的成功回调中的语法错误。此外，ajaxStart和ajaxComplete是全局ajax事件，只需要绑定一次，因此应将其移到change事件之外。在解决了这两个问题并清理间距和标签后，我最终得到了这个：

$("#wait").css("display", "block");
/*first call----------*/
$(document).ready(function () {
    $(".drop").change(function () {

        var id = $(this).val();
        var dataString = '1level=' + id;

        $.ajax({
            type: "POST",
            url: "call2.php",
            data: dataString,
            //cache: false, not needed for post requests
            success: function (html) {

                $(".tab2").html(html);
                $(".tab1").text(id);
                $(".tab3").text("");

                /*second call*/
                $.ajax({
                    type: "POST",
                    url: "names.php",
                    data: dataString,
                    //cache: false, not needed for post requests
                    success: function (html) { // the syntax error was here

                        $("#names").css("display", "block");
                        $(".names").html(html);
                        $("#wait").css("display", "none");

                    }
                });
            }
        });
    });
});

在所有ajax请求上加载图标

1 个答案: