javascript - 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;
}