javascript - ajax 运行时加载显示模式

Question

您好，我正在从我的 php 页面调用 ajax，当 ajax 运行时，我想在基础显示模式上加载图像。

这在我的代码中。

<div id="loadinimg" class="reveal-modal" data-reveal>
        Loading!!!!!!!!!!!!!!!
</div>

   $('.print-button').click(function() {

        $.when(
        $.ajax({
                url: 'newphp1.php',
                type: "POST",
                beforeSend: function() {
                            $('#loadinimg').foundation('reveal', 'open');
                },
                data: {
                        selected_date: '<?php echo $GLOBALS["selected_date"] ?>'
                },
                error: function(data){
                },
                success: function(response){
                         alert(response);    
                         console.log(response);
                },
                complete: function() {
                    $('#loadinimg').foundation('reveal', 'close');
                }
         })).done(
               $.ajax({
                        url: 'newph2p.php',
                        type: "POST",
                        data: {
                                selected_date: '<?php echo $GLOBALS["selected_date"] ?>'
                            },
                        error: function(data){
                            },
                        success: function(response){
                            console.log(response);
                            console.log(response);
                            location.reload();
                        }
                    }));
         });

但只有在 ajax 执行结束时才会弹出显示模式。可能是什么问题？

Answer 1

您可以使用 ajax 的 beforeSend 和 complete 选项，如下所示:

$.ajax({
    url: 'newphp.php',
    type: "POST",
    async: false,
    beforeSend: function() {
                $('#loadinimg').foundation('reveal', 'open');
    },
    error: function(data){
    },
    success: function(response){
             alert(response);    
             console.log(response);
    },
    complete: function() {
             //close the loading image
    }
}

更新

$.when(
$.ajax({
        url: 'newphp.php',
        type: "POST",
        beforeSend: function() {
                    $('#loadinimg').foundation('reveal', 'open');
        },
        error: function(data){
        },
        success: function(response){
                 alert(response);    
                 console.log(response);
        },
        complete: function() {
                 //close the loading image
        }
 })).done(function(){
       //make another ajax call here
 });

更新2

这可能是现在唯一的出路了!只需在 js 文件中设置一个全局变量，如下所示:

var ajax1Complete=false;

$.when(
$.ajax({
        url: 'newphp.php',
        type: "POST",
        beforeSend: function() {
                    $('#loadinimg').foundation('reveal', 'open');
        },
        error: function(data){
        },
        success: function(response){
                 alert(response);    
                 console.log(response);
                 ajax1Complete=true;//set it on success
        },
        complete: function() {
                 //close the loading image
        }
 })).done(function(){
       if(ajax1Complete)
       {
          //make another ajax call here and onsuccess set ajax1Complete to false
       }
 });