美文网首页程序员
Jquery Ajax的封装

Jquery Ajax的封装

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

    最近做代码的优化需要精简下代码
    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));
                },
            });
        }
    

    相关文章

      网友评论

        本文标题:Jquery Ajax的封装

        本文链接:https://www.haomeiwen.com/subject/ytuznctx.html