• jQuery实现加载中效果,防止重复提交


    //导出表格加载中的提示
    var dian=0;//控制'●'的个数
    var t=null;//停止时使用
    function id_loadspot(loadspotSpan,loadingDiv,exportLink){
      loadingDiv.css('visibility','visible');//显示
      exportLink.click(function(){//使链接失效
        return false;
      });
      t=setTimeout(function() {
        if (dian >= 3) {
          loadspotSpan.text('');
          dian = 0;
        } else {
          dian++;
          loadspotSpan.text(loadspotSpan.text() + '●');
        }
        id_loadspot(loadspotSpan,loadingDiv,exportLink);//递归调用
      }, 1000);

    }
    //停止加载中的提示
    function stop_id_loadspot(loadingDiv,exportLink){
      clearTimeout(t);//停止定时器
      loadingDiv.css('visibility','hidden');//隐藏
      exportLink.unbind("click");//使链接生效
    }

    //页面

    <div  style=" 10%; height: 30px; float: right; text-align: left;">
    <a href="javascript:exportMerchantExcel();"  style="text-align: center;" class="audit" id="exportLink">导出</a>
      <div style="display: inline-block;visibility:hidden; 66px; text-align: left;" id="loadingDiv">
        加载中<span id="id_loadspot"></span>
      </div>
    </div>

    //使用

    seachKey = $("#merchantName").val();
    status =$('#upsfyx').combobox('getValue');

    //加载中...
    id_loadspot($('#id_loadspot'),$("#loadingDiv"),$("#exportLink"));
    $.ajax({
      url : '../system/cisweb/exportMerchantExcel',
      dataType : "json",
      type : "post",
      data : {
      seachKey : seachKey,
      status:status,
      },
      success : function(data) {
      if (data.status == "succeed") {
        $("#download").attr("href", data.path);
        $("#subBtn").trigger("click");
      } else {
      $.messager.alert('提示', data.msg, 'error');
    }
    },
    error : function(err) {
      $.messager.alert('提示', err.msg, 'error');
    },

    complete:function(jqXHR, textStatus){
      stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止加载中的提示
    }

    });

  • 相关阅读:
    《Erlang程序设计》 第六章 编译并运行程序
    《Erlang程序设计》第二章 入门
    《Erlang程序设计》第一章 引言
    《Erlang程序设计》第四章 异常
    animation的控件动画效果
    各种自定义动画效果
    loding等待时的一些效果
    逐渐显示的按钮和图片上下切换
    Android的系统架构
    【转】overridePendingTransition 动画切换效果
  • 原文地址:https://www.cnblogs.com/zou-rong/p/10139261.html
Copyright © 2020-2023  润新知