您的位置:首页 > Web前端 > JQuery

基于jquery的ajax简单封装调用案例

2018-11-10 10:43 519 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/namechenfl/article/details/83927238
[code]// submitAjax(post方式提交)
function submitAjax(form, callbak, success, cache, alone) {
var cache = cache || true;
var form = $(form);
var url = form.attr('action');
var data = form.serialize();
ajax(url, data, callbak, success, cache, alone, false, 'post', 'json');
}
/*//调用实例
$(function () {
    $('#form-login').submit(function () {
        submitAjax('#form-login');
        return false;
    });
});*/
// ajax提交(post方式提交)
function post(url, data, callbak, success, cache, alone) {
ajax(url, data, callbak, success, cache, alone, false, 'post', 'json');
}
// ajax提交(get方式提交)
function get(url, callbak, success, cache, alone) {
ajax(url, {}, callbak, success, alone, false, 'get', 'json');
}
// jsonp跨域请求(get方式提交)
function jsonp(url, callbak, success, cache, alone) {
ajax(url, {}, callbak, success, cache, alone, false, 'get', 'jsonp');
}
/* ajax封装
* url 发送请求的地址
* data ajax请求参数
*success 请求成功后执行的方法
* cache 浏览器历史缓存 默认为false
* alone 独立提交(一次有效的提交)默认为false
* type 请求的方式 默认为get
* dataType 返回JSON数据 默认为JSON格式数据
*contentType 默认"application/x-www-form-urlencoded" 复杂json数据请用application/json
* async 异步请求 默认为true
*beforeSend 请求之前执行
*complete 请求完成执行
*error 请求失败执行
*/
//页面加载所要进行的操作
$(function () {
//设置ajax当前状态(是否可以发送);
ajaxStatus = true;
});

function ajax(url, data, callbak, success, cache, alone, async, type, dataType, contentType, beforeSend, complete, error) {
var type = type || 'post';//请求类型
var dataType = dataType || 'json';//接收数据类型
var contentType = contentType || "application/x-www-form-urlencoded";
var async = async || true;//异步请求
var alone = alone || false;//独立提交(一次有效的提交)
var cache = cache || false;//浏览器历史缓存
var callbak = callbak || function(data){}
var success = success || function (data) {
/*console.log('请求成功');*/
setTimeout(function () {
layer.msg(data.Message);//通过layer插件来进行提示信息
}, 500);
if (data.Code == 200) {//服务器处理成功
setTimeout(function () {
callbak;
if (data.url) {
location.replace(data.url);
} else {
location.reload(true);
}
}, 1500);
}
else {//服务器处理失败
if (alone) {//改变ajax提交状态
ajaxStatus = true;
}
}
};
var beforeSend = beforeSend || function () {
layer.msg('加载中', {//通过layer插件来进行提示正在加载
icon: 16, shade: 0.01
}, function () {
//do something
});
};
var complete = complete || function (data) {
ajaxStatus = true;
//console.log(data)
};
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,
'contentType': contentType,
'async': async,
'success': success,
'complete': complete,
'error': error,
'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4),
'beforeSend': beforeSend,
'complete': complete,
});
}

AjaxSimple.js

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: