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

【问题标题】：simple way to do an ajax loading UI widget?做一个ajax加载UI小部件的简单方法？
【发布时间】：2013-07-16 07:09:52
【问题描述】：

这可能是非常标准的，我真的很惊讶还没有关于此的帖子。重要提示：我不使用 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();
        })
}

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

【问题讨论】：

我建议你修复异步部分。做一个同步的$.ajax 请求毫无意义。这可能会“自动”解决您的其他问题
不，不会的。我有一堆其他代码，设置 async:true 是我设法让它一切正常的唯一方法。
不会？ jsfiddle.net/FGSxr
类似问题：stackoverflow.com/questions/7588994/…
@Johan，我不明白在 ajax 请求中添加延迟与实际请求在返回数据之前挂起是一样的吗？

标签： jquery

【解决方案1】：

使用 beforeSend 回调

示例：

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

【讨论】：

【解决方案2】：

我是这样做的...

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

那就这样吧……

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

【讨论】：