ajax 在什么位置添加loading状态？

Question

$.ajax({
    type: "get",
    url: url,
    data: {
        page: "1",
        size: "10",
        userId: doctorId
    },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(data) {},
    error: function(data) {}
});                    

这是ajax请求代码，请问在什么位置添加 loading

Answer 1

$.ajax({
    type: "get",
    url: url,
    data: {
        page: "1",
        size: "10",
        userId: doctorId
    },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    beforeSend: function () {
        $loading.show()
    },
    success: function(data) {
        // 数据加载完成，立刻隐藏loading
        $loading.hide()
        // do something
    }
});    

Answer 2

Jquery ajax 有2个地方可以设置 一个是在全局设置 .ajaxStart() .ajaxStop()方法

另一个就是你这种 直接在内部定义 加个beforeSend方法即可

Answer 3

beforeSend

Answer 4

$.ajax({
    type: "get",
    url: url,
    data: {
        page: "1",
        size: "10",
        userId: doctorId
    },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();

      if (myXhr.upload){
        myXhr.upload.addEventListener('progress',  function(e) {
          if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            console.log(percent)
          };
        }, false);
      };

      return myXhr;
    }
});