编写一个ajax的loading插件，增强用户体验，点击按钮，发送ajax的过程中，按钮置灰禁用并呈现loading效果

虽然处在java的职位，但我忘不了我们学习的就是全栈开发工程师，这是我们的初心，在做好java的同时，当然也要兼顾好前端。

说起用户体验，后台的同学可能想到就是，使接口响应时间快一点，别随随便便就抛异常。但是别忘了，和用户关系最好的当然是前端。比如要上传一个比较大的文件，不管是form表单提交，还是使用ajax提交，可能因为文件较大，或者是网络延时，用户点击了提交或确定按钮的之后，文件io到后台我们的接口，我们的响应信息到达用户的浏览器之前，这段时间我们的浏览器应该是怎么样的呢？无任何变化吗？如果用户等的时间较长，他会不会再次点击一下提交按钮的，如果用户比较狂躁，狂点我们的提交按钮怎么办呢？

 做文件上传的时候，如果文件比较大，可以在用户点击提交按钮后，添加进度条，具体做法请参考下我之前的文章：

jquery前端文件上传进度条（非插件），spring boot文件上传实时进度条，主要代码ajax

进入正题，ajax时的loading效果，先看实现效果吧 ：

点击确定按钮之后，按钮的内容改变为iconfont的小圆圈，并且是旋转的。服务器给出响应之后，浏览器在做响应的操作，或是启用按钮，或是跳转页面。

下面是实现主要代码：

loading.js，loading.css，iconfont.js三个文件

var doAjax;
var loadingIcon;
var btnDoAjax;
var fullAjax;
//计算当前js的路径
var script = $("script");
var source;
$.each(script, function(i, js) {
	var src = js.src;
	if(src.indexOf("loading.js") > 0) {
		source = src.replace("loading.js", "");
		return false;
	}
});
var link = $('<link>');
link.attr({"rel":"stylesheet","type":"text/css","href":source+"loading.css"});
$('head').append(link);
$.getScript(source+"iconfont.js",function(){
	loadingIcon = $('<svg class="icon" id="loading" style="width:1.1em;height:1.1em;vertical-align: -0.15em;" aria-hidden="true"><use xlink:href="#iconloading"></use></svg>')
	doAjax = function(method,url,data,callback,target){
		var fun_cache= $._data(target.get(0),'events');
		var oldText = target.text();
		var hasClick = false;
		var click_arr = [];
		if(fun_cache != undefined){
			if('click' in fun_cache){
				click_arr = fun_cache.click
				hasClick = true;
				//禁用元素的点击事件
				$._data(target.get(0),'events')['click'] = undefined;
				target.css("opacity",0.5).html(loadingIcon);
			}
		}
		$.ajax(url,{
			type:method,
			data:data,
			success:function(data){
				//启用元素的点击事件
				if(hasClick){
					$._data(target.get(0),'events')['click'] = click_arr;
					target.css("opacity",1).text(oldText);
				}
				callback(data);
			}
		});
	}
	btnDoAjax = function(method,url,data,callback,target){
		var oldText = target.text();
		//禁用元素的点击事件
		target.css("opacity",0.5).html(loadingIcon).prop("disabled","true");
		$.ajax(url,{
			type:method,
			data:data,
			success:function(data){
				//启用元素的点击事件
				target.css("opacity",1).text(oldText).prop("disabled","false");
				callback(data);
			}
		});
	}
	fullAjax = function(params,target,callback){
		var oldText = target.text();
		//禁用元素的点击事件
		target.css("opacity",0.5).html(loadingIcon).prop("disabled","true");
		var oldSuccess = params.success;
		params.success = function(data){
			//启用元素的点击事件
			target.css("opacity",1).text(oldText).removeAttr("disabled");
			oldSuccess(data);
			if(typeof(callback) === "function"){
				callback();
			}
		}
		$.ajax(params);
	}
})

 这个css就是为了让图标转动起来：

#loading{
	animation:loading 2s linear infinite
}
@keyframes loading{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

主要思路是将ajax方法包装起来，这样我们引入这个文件，调用的时候这样调用：

var params = {
                type: "POST",
                url: baseURL + url,
                contentType: "application/json",
                data: JSON.stringify(vm.dept),
                success: function(r){
                    if(r.code === 0){
                        layer.msg('操作成功',{icon:6});
                        vm.reload();
                    }else{
                        layer.msg(r.msg,{icon:5});
                    }
                }
            }
            fullAjax(params,$("#subBtn"));

这里我就展示这个fullAjax怎么使用，上面两个方法有点js基础的同学很容易就可以看懂，也会理解怎么用。

需要源码的同学可以点下面的连接进行下载，没有积分的可以私信我哦！

ajax-loading插件，增强用户体验