javascript - 使用 Ajax 方法检索数据时显示加载

Question

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

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

Answer 1

It is very simple..

before you call the ajax start your loading image..& after the success hide the image for eg :

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

here

$.fancybox.showLoading()

is my function in which I have the property of displaying the loader,

Answer 2

This will be internally called whenever an ajax call is made.

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

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

HTML

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

Answer 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上