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

格塔。

Answer 1

简单：在启动ajax（） - methode之前，显示微调器图像。在成功方法中，再次隐藏它。

Answer 2

$.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查询的元素。

Answer 3

麻烦在于您的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(); });

$ .ajax的jQuery加载状态

3 个答案: