基于jquery的$.ajax再次封装(可以防止重复请求)

一、$.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请求都采用这些方法,在后期维护和调整时更加容易方便,只需调整这几个函数而不必要一个个的去调整。

展开阅读全文

没有更多推荐了,返回首页