jquery实现ajax请求数据期间显示加载动画-插件jquery.mloading

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

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组件