一、$.ajax为什么要再次封装
- jquery很强大,基本js开发标准了,尔$.ajax做为异步加载数据功能也很强大,但有时却不能满足我们的需求,就需要再定制一下。 例如:添加数据时连点会产生多条数据,网络或程序出现问题是页面会假死等现象。
二、$.ajax的封装
- $.ajax的参数有很多,$.post、$.get等都是基于$.ajax的封装
$.ajax({ 'url': url,//请求的url 'data': data,//请求的参数 'type': post,//请求的类型 'dataType': json,//接收数据类型 'async': true,//异步请求 'cache': false,//浏览器缓存 'success': function () {},//请求成功后执行的函数 'error': function () {},//请求失败后执行的函数 'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4),//通过jsonp跨域请求的回调函数名 'beforeSend': function () {},//请求前要处理的函数 });
- $.ajax的封装
//页面加载所要进行的操作 $(function () { //设置ajax当前状态(是否可以发送); ajaxStatus = true; }); // ajax封装 function ajax(url, data, success, cache, alone, async, type, dataType, error) { var type = type || 'post';//请求类型 var dataType = dataType || 'json';//接收数据类型 var async = async || true;//异步请求 var alone = alone || false;//独立提交(一次有效的提交) var cache = cache || false;//浏览器历史缓存 var success = success || function (data) { /*console.log('请求成功');*/ setTimeout(function () { layer.msg(data.msg);//通过layer插件来进行提示信息 },500); if(data.status){//服务器处理成功 setTimeout(function () { if(data.url){ location.replace(data.url); }else{ location.reload(true); } },1500); }else{//服务器处理失败 if(alone){//改变ajax提交状态 ajaxStatus = true; } } }; var error = error || function (data) { /*console.error('请求成功失败');*/ /*data.status;//错误状态吗*/ layer.closeAll('loading'); setTimeout(function () { if(data.status == 404){ layer.msg('请求失败,请求未找到'); }else if(data.status == 503){ layer.msg('请求失败,服务器内部错误'); }else { layer.msg('请求失败,网络连接超时'); } ajaxStatus = true; },500); }; /*判断是否可以发送请求*/ if(!ajaxStatus){ return false; } ajaxStatus = false;//禁用ajax请求 /*正常情况下1秒后可以再次多个异步请求,为true时只可以有一次有效请求(例如添加数据)*/ if(!alone){ setTimeout(function () { ajaxStatus = true; },1000); } $.ajax({ 'url': url, 'data': data, 'type': type, 'dataType': dataType, 'async': async, 'success': success, 'error': error, 'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4), 'beforeSend': function () { layer.msg('加载中', {通过layer插件来进行提示正在加载 icon: 16, shade: 0.01 }); }, }); } // submitAjax(post方式提交) function submitAjax(form, success, cache, alone) { cache = cache || true; var form = $(form); var url = form.attr('action'); var data = form.serialize(); ajax(url, data, success, cache, alone, false, 'post','json'); } /*//调用实例 $(function () { $('#form-login').submit(function () { submitAjax('#form-login'); return false; }); });*/ // ajax提交(post方式提交) function post(url, data, success, cache, alone) { ajax(url, data, success, cache, alone, false, 'post','json'); } // ajax提交(get方式提交) function get(url, success, cache, alone) { ajax(url, {}, success, alone, false, 'get','json'); } // jsonp跨域请求(get方式提交) function jsonp(url, success, cache, alone) { ajax(url, {}, success, cache, alone, false, 'get','jsonp'); }
效果图为,先显示正在加载,后提示操作后的结果
三、封装后的好处
- 进行这样的的封装后,可以在客户端限制用户的请求,每秒只可以发送一次请求
- 无论是网络问题,还是程序问题,都可以及时给出相应的提示,增加用户体验
- 使用submitAjax提交表单添加数据时通过alone参数可以实现一次有效的请求,减少重复数据的生成(同时其他的方法也可以,都有alone这个参数)。
- 对于ajax请求都采用这些方法,在后期维护和调整时更加容易方便,只需调整这几个函数而不必要一个个的去调整。
基于jquery的$.ajax再次封装(可以防止重复请求)
最新推荐文章于 2024-07-04 17:25:45 发布