jquery - 带有 AJAX 的 asp.net 中的 Jquery

Question

我在 asp.net 中有一个 Dropdownlist (id=ddl)，它通过 Ajax 异步更新数据。现在我只想在初始化 Ajax 请求时显示加载面板。那么最好的选择是什么？

此代码不起作用...

$("#ddl").ajaxStart(function () { ShowLoadingPanel(); }).ajaxStop();

Answer 1

对于特定的 AJAX 调用：

$.ajax({..., beforeSend: function(){ /* show the loading thing */ },
    complete: function(){ /* hide the loader */ }});

一般的：

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

我个人最好的jQuery“请稍候，正在加载……”动画？：

// a bit modified for jQuery 1.8 and error handling (CSS and instruction at the link)
    $(document).on(
        {
            ajaxStart : function()
            {
                if (!$('div.modal').length)
                {
                    $('body').append($('<div>',
                    {
                        'class' : 'modal'
                    }));
                }

                $('body').addClass("loading");
            },
            ajaxStop : function()
            {
                $('body').removeClass("loading");
            },
            ajaxError : function(e, x, settings, exception)
            {
                var message, statusErrorMap =
                {
                    '400' : "Server understood the request but request content was invalid.",
                    '401' : "Unauthorised access.",
                    '403' : "Forbidden resouce can't be accessed",
                    '500' : "Internal Server Error.",
                    '503' : "Service Unavailable."
                };

                if (x.status)
                {
                    message = statusErrorMap[x.status];
                    if (!message)
                    {
                        message = "Unknow Error.";
                    }
                } else if (e == 'parsererror')
                {
                    message = "Error.\nParsing JSON Request failed.";
                } else if (e == 'timeout')
                {
                    message = "Request Time out.";
                } else if (e == 'abort')
                {
                    message = "Request was aborted by the server";
                } else
                {
                    message = "Unknow Error.";
                }

                alert(message);
            }
        });

Answer 2

// 显示/隐藏 ajax 请求的全局函数

 $(document).ajaxStart(function() {
   ShowLoadingPanel();
 });

$(document).ajaxStop(function() {
    HideLoadingPanel();
 });

或将其与特定项目绑定

 $("#ddl").bind("ajaxStart", function() {
   ShowLoadingPanel();
 });

 $("#ddl").bind("ajaxStop", function() {
   HideLoadingPanel();
 });

当你完成 ajax 调用时执行 unbind

$("#ddl").unbind();