<script type="text/javascript">
  //批量发卡指令
    $('#addmanycard').click(function(){
      var msgid=layer.msg('正在批量发卡中...', {icon: 16,shade: [0.8, '#393D49'],time:false,});
      var id = $(this).attr('id');
      $.ajax({
      type:"POST",
       url:"{:url('admin/doorcontroller/addmanycard')}",
      data:"type="+id+"&doordata="+doordata,
      dataType:"json",
        xhr: function() { //ajax进度条
          var xhr = $.ajaxSettings.xhr();
          if (onprogress && xhr.upload) {
              xhr.upload.addEventListener("progress", progressBar, false);
              return xhr;
          }
      },
      beforeSend: function() {
         //请求前的处理
         layer.close(msgid);//手动关闭
         layer.msg('已下载10%');
     },
      success:function(data){
        layer.close(msgid);//手动关闭
        layer.msg(data.msg);
      },
      error: function (error) {
          alert(" error : " + error.responseText);
      }
    });
    })
    
    
$.ajax({
    url: "http://www.microsoft.com", //请求的url地址
    dataType: "json", //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    data: {
        "id": "value"
    }, //参数值
    type: "GET", //请求方式
    processData: false, //对表单data数据是否进行序列化
    contentType: false, //dataType设置你收到服务器数据的格式
    xhr: function() { //ajax进度条
        var xhr = $.ajaxSettings.xhr();
        if (onprogress && xhr.upload) {
            xhr.upload.addEventListener("progress", progressBar, false);
            return xhr;
        }
    },
    beforeSend: function() {
        //请求前的处理
    },
    success: function(req) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});



//进度方法


/**
 *    侦查附件上传情况,这个方法大概0.05-0.1秒执行一次
 */
function progressBar(evt) {
    var loaded = evt.loaded; //已经上传大小情况
    var tot = evt.total; //附件总大小
    var per = Math.floor(100 * loaded / tot); //已经上传的百分比
    $.fn.progressInit.draw(per + '%'); //绘制经度条
}
  </script>

先说说这个 beforeSend， 在请求发送前执行 比如 可以判断用户有没有登录 ，如果没有登录就停止请求 并提示。

$.ajax({
  url : 'my_action',
  dataType: 'script',
  beforeSend : function(xhr, opts){
    if(1 == 1) //just an example
    {
      xhr.abort(); // 停止请求
    }
  },
  complete: function(){
    console.log('DONE');
  }
});

$.ajax有一个参数是complete：function(){} 是在 请求完成之后执行的 ，配合beforeSend可以用来展示进度条

$.ajax({
     url : 'my_action',
     dataType: 'script',
     beforeSend : function(){
       // 设置 进度条到20%慢慢变到50%
     },
     complete: function(){
       // 设置 进度条到80%
     }
     success：function(){
       // 渲染页面
       // 进度到100%
     }
   });

这个只是表面上的看到的进度条 ，展示大概的进度，并不是真正的加载进度。