使用 Ajax 方法检索数据时显示加载答案

【问题标题】：Display loading while retrieving data using Ajax method使用 Ajax 方法检索数据时显示加载
【发布时间】：2013-04-20 07:13:06
【问题描述】：

我正在使用 ajax，有时从我的数据库中加载所有数据需要时间，因此我需要找到一种方法来显示（正在加载...），而数据尚未完成。下面是我的示例代码，我正在寻找数据仍在处理中的一些事件。

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(data){
     $('#para').html(data);
   }
 });

【问题讨论】：

stackoverflow.com/about

标签： javascript jquery ajax post

【解决方案1】：

很简单..

在调用 ajax 之前开始加载图像..& 成功后隐藏图像例如：

$.fancybox.showLoading();
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(data){
     $.fancybox.hideLoading();
     $('#para').html(data);
   }
});

这里

$.fancybox.showLoading()

是我的函数，其中我具有显示加载程序的属性，

【讨论】：

【解决方案2】：

每当进行 ajax 调用时，都会在内部调用。

$.ajaxStart(function() {
    $("img#loading").show();
});

$.ajaxComplete(function() {
    $("img#loading").hide();
});

HTML

<img src="../images/loading.gif" alt="wait" id="loading"/>

【讨论】：

【解决方案3】：

<div id="loading">LOADING...</div>

var loading = $("#loading");

loading.hide();

function doAjax() {
    loading.show();
    $.ajax({
        url: "/js/beautifier.js",
        success: function (data) {
            loading.hide();
        }
    });
}

doAjax();

在jsfiddle

【讨论】：