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

看看是否存在差异。

ajax在发送之前和完成之后加载模态

3 个答案: