111天前2020-04-22 11:27:43 |    抢沙发  324 
最近在做一个通过ajax向后端请求数据的功能,但是由于后端处理事件比较久,所有前端提交请求后就会有一段时间是空白,无任何提示和反应,于是就有了本文的在ajax请求数据期间显示加载动画教程,主要用到了ajax方法里面的beforeSend字段和jquery.mloading插件,当然如果你不想用插件也可以自己写最关键的就是beforeSend方法了。

loding动画

这里我就不废话了,直接上代码。

jquery代码:


var put_data = {};
$.ajax({
      url:"https://www.32e.top/",
      type:'POST',
      data:put_data,
      cache:false,
      dateType:"json",
      beforeSend: function () {
        //显示遮罩
        $("body").mLoading("show");
      },
      success:function (data) {
        //关闭遮罩
        $('body').mLoading("hide");
        if (data.success == 'true'){
             console.log('OK');
        }else {
            console.log('no');
        }
      }
    });


这里我解释一下用法吧!

beforeSend就是在发送请求的时候执行的动作,相当于是一个生命周期的钩子函数。

我们再这里的里面函数中放入打开遮罩提示的loding动画。


$("body").mLoading("show");


然后再请求完成后隐藏遮罩。


$('body').mLoading("hide");


这里再讲一下jquery.mloading插件的用法吧,这个插件很多平台下载都收费,要么要注册,个人觉得太不便利了,所以文末我会把插件也一起打包上传上来的。

使用方法
将jquery.mloading.js和jquery.mloading.css引入到页面。

调用:

$(element).mLoading({
    text:"",//加载文字,默认值:加载中...
    icon:"",//加载图标,默认值:一个小型的base64的gif图片
    html:false,//设置加载内容是否是html格式,默认值是false
    content:"",//忽略icon和text的值,直接在加载框中显示此值
    mask:true//是否显示遮罩效果,默认显示
});
方法:

$(element).mLoading("show");//显示loading组件
$(element).mLoading("hide");//隐藏loading组件
上面是官方提供的使用方法,简单易懂。

发表评论

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享