zoukankan      html  css  js  c++  java
  • 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提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!!!!!这就是它的优势:自由呀!!!!

  • 相关阅读:
    jquery easy ui 学习 (8)basic treegrid
    jquery easy ui 学习 (7) TreeGrid Actions
    jquery easy ui 学习 (6) basic validatebox
    jquery easy ui 学习 (5) windowlayout
    jquery easy ui 学习 (4) window 打开之后 限制操纵后面元素属性
    提示“应用程序无法启动,因为应用程序的并行配置不正确”不能加载 System.Data.SQLite.dll
    visual studio 添加虚线的快捷键
    VS2010打开项目时,出现“已经在解决方案中打开了具有该名称的项目”问题的解决方案
    visual studio 编译时 出现 Files 的值 乱码
    微信 连接被意外关闭
  • 原文地址:https://www.cnblogs.com/haiying520/p/5337376.html
Copyright © 2011-2022 走看看