$.ajax 的 jQuery 加载状态

Question

我使用以下代码从数据库获取数据（从 cs 页面本身创建 html 代码）并将 html 代码绑定到 div。

问题：

如果数据库大小较大，则需要一些时间才能显示结果。我想在那个位置放置一个loading.gif 图像。一旦获得数据，我就必须隐藏加载图像。

编辑：

问题：一旦隐藏，show() 就不起作用。

 <div id="searchContainer" class="search_outer">
        <div id="Loading"></div></div>

代码：

    $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) {  $("#Loading").hide(); $("#searchContainer").html(data.d[0]);}});


     $("#ajax-query-place").ajaxStart(function() {
                      $("#Loading").show();
                  });

Geetha。

Answer 1

问题在于您的 success: 回调。当您这样做时：

$("#searchContainer").html(data.d[0]);

您将覆盖 #Loading 元素，因为它位于 #searchContainer 内部。

请改用 append()。

function(data) {  
    $("#Loading").hide(); 
    $("#searchContainer").append(data.d[0]);
}

或者只需将 #Loading 元素移到 #searchContainer 元素之外。

---

编辑：

我猜您没有名为#ajax-query-place的元素。

你应该使用：

$("#searchContainer").ajaxStart(function() {
     $("#Loading").show();
});

Answer 2

简单：在启动 ajax() 方法之前，显示旋转图像。在success方法中，再次隐藏。

Answer 3

$.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', 
                  category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) { $("#searchContainer").html(data.d[0]);
                                            $("#loading-image").hide();
}});

$("#ajax-query-place").ajaxStart(function(){
      $("#loading-image").show();
});

$("#ajax-query-place") 是获取或发送 ajax 查询的元素。