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

时间:2022-08-23 18:00:12

I have a script that i used in my php page this is the script :

我有一个脚本,我在我的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>

The problem is that my page shows just after the first ajax call, so i want it to be shown until the second ajax call takes effect !!!

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

2 个解决方案

#1


4  

Firstly place a div over the site, something like this:

首先在网站上放置一个div,如下所示:

<div id="overlay">
    Loading...
</div>
#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
    z-index: 9999;
}

Then in the complete callback of the second AJAX call, remove that overlay once your UI has been set up.

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

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

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

#2


0  

Try this:

尝试这个:

$(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
    });
});

Try hiding the body first, when your second ajax call gets completed you can show the body.

首先尝试隐藏身体,当你的第二个ajax呼叫完成后,你可以显示身体。

#1


4  

Firstly place a div over the site, something like this:

首先在网站上放置一个div,如下所示:

<div id="overlay">
    Loading...
</div>
#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
    z-index: 9999;
}

Then in the complete callback of the second AJAX call, remove that overlay once your UI has been set up.

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

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

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

#2


0  

Try this:

尝试这个:

$(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
    });
});

Try hiding the body first, when your second ajax call gets completed you can show the body.

首先尝试隐藏身体,当你的第二个ajax呼叫完成后,你可以显示身体。