一、$.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');
}
效果图为，先显示正在加载，后提示操作后的结果
Paste_Image.png
Paste_Image.png
三、封装后的好处
- 进行这样的的封装后，可以在客户端限制用户的请求，每秒只可以发送一次请求
- 无论是网络问题，还是程序问题，都可以及时给出相应的提示，增加用户体验
- 使用submitAjax提交表单添加数据时通过alone参数可以实现一次有效的请求，减少重复数据的生成（同时其他的方法也可以，都有alone这个参数）。
- 对于ajax请求都采用这些方法，在后期维护和调整时更加容易方便，只需调整这几个函数而不必要一个个的去调整。
