在等待帖子的响应时添加加载图像

时间:2013-07-13 04:38:01

标签: jquery

我想在等待来自jquery中的帖子的响应时添加加载图像或更改鼠标光标。

jquery的

$.post(url,data,
    function(response){
    //add a loading cursor to indicate that it is waiting for a response?
    alert(response);
});

我需要这个,因为弹出窗口的响应时间太长了。

任何想法?感谢

2 个答案:

答案 0 :(得分:0)

在ajax调用之前更改游标,并在成功处理程序中更改回来:

$('body').css('cursor','wait');

$.post(url,data, function(response){
    $('body').css('cursor','default');
});

如果您使用$ .ajax,您还可以选择其他选项:

$.ajax({
    url : url,
    data: data,
    type: 'POST',
    beforeSend: function() {
        $('body').css('cursor','wait');
    }
}).done(function(data) {
    // do something with data
}).fail(function() {
    console.log('error');
}).always(function() {
    $('body').css('cursor','default');
});

相同的逻辑适用于加载图像或您决定添加的任何内容?

答案 1 :(得分:0)

这是使用$ .ajax()的选项。您需要在DOM中定义隐藏的loadingImage。

        $.ajax({                                                                                                           
            type:'POST',                                                                                                   
            ...                                                                                                           
            beforeSend:function(){                                                                                         
                $('.loadingImg').show();                                                                                
            },                                                                                                             
            complete:function(){                                                                                           
                $('.loadingImg').hide();                                                                    
            },                                                                                                             
            ...                                                                                                                                                         
        });