Ajax 加载模式在发送之前和完成后

ajax loading modal before send and after complete

本文关键字：加载 模式 Ajax      更新时间：2023-09-26
before send
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
complete send

这是我从这个 ajax 请求中输出的控制台

$.ajax({
    type: 'POST',
    url: '.php',
    dataType: "json",
    data: {
        lname: lname,
        fname: fname
    },
    success: function(data) {
        console.log(data)
    },
    error: function(data) {
        //console.log("error" + data);
    },
    beforeSend: function() {
        console.log('before send')
        $('#modal').show();
    },
    complete: function() {
        console.log('complete send')
        $('#modal').hide();
    }
})

这是我的模态div

<div id="modal"></div>

样式为 

#modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                //url('http://sampsonresume.com/labs/pIkfp.gif') 
                url('images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}
#modal {
    overflow: hidden;   
}
#modal {
    display: block;
}

但问题是我的div 模态没有显示。控制台正常。首先会出现before send然后加载数据，然后complete send

尝试删除 #modal CSS 中的注释url：

#modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )  
                url('images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

也许它发生得太快以至于你看不到它，请使用如下所示的超时 

complete: function() {
    console.log('complete send');
    setTimeout(function(){
        $('#modal').hide();
    }, 1000);
}

看看是否有区别。

使用 show 显示模态

   $('#modal').show();
   $.ajax({...});

或者，在您的情况下，当 ajax 在页面就绪时触发时，只需使用 CSS 将模式显示为默认值

#modal {
    display:    block;
}
相关文章：