虽然处在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基础的同学很容易就可以看懂,也会理解怎么用。
需要源码的同学可以点下面的连接进行下载,没有积分的可以私信我哦!