發送之前和完成之后的ajax加載模式

Question

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

Answer 1

嘗試在#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;
}

Answer 2

使用show來顯示模態

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

或者如果您在頁面准備就緒時觸發ajax，只需使用css將模式顯示為默認模式

#modal {
    display:    block;
}

Answer 3

可能發生的太快了，您看不到它，請使用如下所示的超時時間

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

看看是否有區別。