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

// 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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值