jquery的ajax提交时“加载中”提示的处理方法

方法1：使用ajaxStart方法定义一个全局的“加载中。。。”提示

$(function(){
    $("#loading").ajaxStart(function(){
       $(this).html.("<img src=\'/jqueryStu/images/loading.gif\' />");
     });
     $("#loading").ajaxSuccess(function(){
       $(this).html.("");
       // $(this).empty(); // 或者直接清除
     });

}）;

<div id="loading"></div>

注意：

所有的ajax提交都会触发ajaxStart事件，都会在你定义的

<div id="loading"></div>

位置上显示“加载中。。。”的图标（当然你也可以定义文字，但是一个加载中的图片比较好看）；

-------但是一定要注意，同时要定义好ajaxSuccess事件，ajax提交成功后把这个图标隐藏起来！！！

特别提示：

使用ajaxStart或ajaxSuccess事件时，相当于定义了一个全局的显示“加载中。。。”的位置，所有ajax提交时候“加载中。。。”的图标都始终显示在一个位置！！！！

方法2：在ajax方法中定义任意位置显示的“加载中。。。”提示

$(\'#ajax_test2\').click(function(){
     $.ajax({
          url ---- url路径，根据你需要些啦,
          type:\'post\',
          data:\'name=ZXCVB\',
         timeout:15000,
          beforeSend:function(XMLHttpRequest){
             //alert(\'远程调用开始...\');
              $("#loading").html.("<img src=\'/jqueryStu/images/loading.gif\' />");
        },
         success:function(data,textStatus){
             alert(\'开始回调，状态文本值：\'+textStatus+\' 返回数据：\'+data);
             // $("#loading").empty();
          },
          complete:function(XMLHttpRequest,textStatus){
              // alert(\'远程调用成功，状态文本值：\'+textStatus);
             $("#loading").empty();
          },
           error:function(XMLHttpRequest,textStatus,errorThrown){
             alert(\'error...状态文本值：\'+textStatus+" 异常信息："+errorThrown);
             $("#loading").empty();
          }
       });
    });

< input type.="button" id="ajax_test2" value="Ajax方式">
<div id="loading"></div>

很明显，在beforeSend时，在指定的位置显示“加载中。。。”图标，在error、complete、success后把该图标移除掉！！！！

注意：

页面有多个ajax提交时候，建议使用第二种方式，因为“加载中。。。”图标可以显示在任意你需要刷新的位置上！！！！！这就是它的优势：自由呀！！！！