一个简单的方法来做一个ajax加载UI小部件？

Question

这可能是非常标准的，我真的很惊讶没有关于此的帖子。重要提示：我不使用jQuery UI，因此寻找实现此目的的最简单方法：

function loadAjax(){
        $('body').append('<div id="status">loading...</div>');
        var out = '';
        $.ajax({
            type    : "POST",
            url : "load.php", // i'm mimicking slow network by using sleep(3) in the php
            async   : false // yes, false! No clue why but my stuff won't work otherwise
        })
        .done(function(response) {
            out = $.parseJSON(response);
            $('#status').remove();
        })
}

为什么{<1}} div在完成ajax之后才出现？我试图在加载之前显示，然后在发送返回对象时消失。

Answer 1

使用beforeSend回调

示例：

$.ajax({
        type    : "POST",
        url : "load.php",
        beforeSend: function(){ $('body').append('<div id="status">loading...</div>'); }
    })

Answer 2

我这样做......

只需将#status设置为display:none;

即可

然后这样做......

 $('#status').show();
 $.post('load.php', function(response){
   $('#status').hide();
   out = $.parseJSON(response);
 });