Question

我有一个我在php页面中使用的脚本这是剧本：

<script>
    $(document).ready(function() {
        $.ajax({
            url:"http://www.exemple.com/jsonp?j=123",
            dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
            success:function(data){
                // I get data and i sendit to test
                $.ajax({
                    url: 'test/' + data,
                    type : 'POST',
                    complete: function(){
                        // the function test is complete
                    },
                });
            }},
        });
    });
</script>

问题是我的页面显示在第一个ajax调用之后，所以我希望它显示直到第二个ajax调用生效!!!

Answer 1

首先在网站上放置div，如下所示：

<div id="overlay">
    Loading...
</div>

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
    z-index: 9999;
}

然后在第二次AJAX调用的complete回调中，在设置完UI后删除该叠加层。

complete: function(){
    // the function test is complete

    $("#overlay").fadeOut();
}

Answer 2

试试这个：

$(document).ready(function() {
    $(document.body).hide(); ///<--------hide it here
    $.ajax({
        url:"http://www.exemple.com/jsonp?j=123",
        dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
        success:function(data){
            // I get data and i sendit to test
            $.ajax({
                url: 'test/' + data,
                type : 'POST',
                complete: function(){
                    // the function test is complete
                   $(document.body).show(); ///<--------show it here
                }, // remove the traling comma here
            });
        } //<--------i see a bad closing here, remove the trailing comma
    });
});

首先尝试隐藏body，当您的第二个ajax调用完成后，您可以显示body。

等到ajax脚本完成后再显示页面

2 个答案: