編寫一個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插件，增強用戶體驗