2

我使用 JSON 从我的控制器中检索数据并使用 jquery 将其打印在我的视图上。当用户单击菜单链接时显示内容。在内容加载之前，用户必须等待几秒钟。

所以在这期间，我想在我的视图中显示加载图像，当内容显示成功时，加载图像隐藏。

这是我放置加载图像的 html：

<div id="loading" style="position:relative; text-align:center;">  
   <img src="/Content/Images/loading.gif" alt="Processing" />
</div>

这是 jquery 的示例函数：

function ViewProduct() {
  $('#loading').hide();
  $("#content ul#navmenu-v").empty();
  $.getJSON(url, function (data) {
     $.each(data, function (index, dataOption) {
     var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
        mainMenu.append(new_li);
        $('a#' + dataOption.ID).click(function () {
            //display the loading image
            $.getJSON("ProductListing/Index", data, function (product) {
                //append the content in the body of web page
            });
        });
    });
});

}

这是我调用函数的地方：

$(document).ready(function () {
   ViewProduct();
});

问题：我想在点击后隐藏加载图像。任何人都可以告诉我这件事吗？非常感谢。

4

1 回答 1

2

$.getJSON(url, [, data], [, callback])是简写

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

jQuery.ajax 规范表明我们可以指定一个无论 AJAX 请求是否成功都会触发的回调。我们将使用它来隐藏请求后的加载图标：

function ViewProduct() {
    $('#loading').hide();
    $("#content ul#navmenu-v").empty();

    $.getJSON(url, function (data) {
        $.each(data, function (index, dataOption) {
        var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
        mainMenu.append(new_li);
        $('a#' + dataOption.ID).click(function () {

            //display the loading image
            $('#loading').show();

            $.ajax({
                'type': 'GET',
                'url': 'ProductListing/Index',
                'data': data,
                'dataType': 'json',
                'success': function (product) {
                    //append the content in the body of web page
                },
                'complete': function () {
                    $('#loading').hide();
                }
            });
        });
    });
});
于 2012-06-04T04:01:36.533 回答