jquery - 做一个 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();
        })
}

为什么在ajax完成之后loading...div才出现？我试图让它在加载之前出现，然后在发送返回对象时消失。

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