Jquery Ajax的封装

作者: 佐峰empty | 来源:发表于2019-12-23 13:48 被阅读0次

Jquery Ajax 封装
【JavaWeb】jQuery对Ajax的支持
封装 jQuery.ajax
html5的ajax学习（三）
黑猴子的家：JavaWeb 之 Jquery
promise
ajax总结
AJAX学习（二）：jQuery与AJAX
JQuery_AJAX
jQuery中的Ajax

最近做代码的优化需要精简下代码
1.对于jquery总ajax不变的参数封入函数内部
2.对于需要传递的参数则传递到函数内部
主要实现思路
1.配置一个对象对象的exeScript为一个函数
2.exeScript的函数形参来配置ajax的各个参数
参数说明
1.type 配置各种请求（例如：get post push...）
2.url两部分组成 rootUrl为接口服务器 option.url为接口的二级路径或方法名
3.data 为接口的参数对此进行转化为字符串形式
4.关于dataType 的配置写死了为json形式当然也可以配置为其他形式
5.beforeSend 可以传递一个函数（例如loading函数）满足各个需求
代码如下

var rootUrl='http://192.168.1.111:8000';
var Ajax = {};
Ajax.exeScript = function(option) {
    var dataType='';
    option.dataType?dataType=option.dataType:dataType='post';
    if(!option.beforeSend){
        function beforeSend(){
            $('body').append('<div class="loadingBox"><div class="loader"><span class="text">Loading</span><span class="spinner"></span> </div> </div>');
        };
    };
    $.ajax({
        type : option.type,
        url : rootUrl + option.url,
        data :JSON.stringify(option.data),
        async: false,
        dataType:dataType,
        contentType: "application/json;charset=utf-8",
        beforeSend:beforeSend,
        success : function(data) {
            if (option.success && $.isFunction(option.success)) {
                
            }
        },
        error : function(xhr, type) {
            if (option.error && $.isFunction(option.error)) {
                
            }
        }
    });
};

函数调用示例代码如下

function test() {
        var data = {"userNo":'',"amount" :''};
        Ajax.exeScript({
            type : "post",
            url : '/test/test.do',
            data : data,
            success : function(data) {
                console.log(JSON.stringify(data));
            },
            error : function(err) {
                console.log(JSON.stringify(err));
            },
        });
    }