自定义封装Jquery ajax方法

来源:互联网 发布:淘宝家具大品牌有哪些 编辑:程序博客网 时间:2024/05/20 23:35

jquery自带的ajax方法为什么要封装?

在前后端分离或者需要大量使用ajax方法的情况下,一直使用Jquery自身封装的ajax方法是不太实用的,代码冗余量太大。
这里提供自定义的两种封装方法:

/** * 使用ajax GET 提交前端数据 * @param url 接口路径 * @param obj 接口所需参数 * @param isAsync 是否接受异步 */function ajax(url,obj,isAsync) {    var keys = getObjKeys(obj);    var values =getObjValues(obj,keys);    var params = joinStr(keys,values);    var json={};    $.ajax({        type : "GET",  //提交方式        url : rootUrl+url+params,//路径        async:isAsync,        success : function(result) {//返回数据根据结果进行相应的处理            // console.log("ajax接收后台数据:");            // console.log(result);            json=result;        },        //异常处理        error:function (XMLHttpRequest, textStatus, errorThrown) {            console.log(XMLHttpRequest+"---"+textStatus+"---"+errorThrown)        }    });    // console.log(json);    return json;}/** * 使用post方式处理ajax * @param url * @param obj * @param isAsync * @returns {{name: string}} */function ajaxPost(url,obj,isAsync) {    var json={};    $.ajax({        type : "POST",  //提交方式        url : rootUrl+url,//路径        async:isAsync,        data:obj,        contentType:"application/x-www-form-urlencoded",        success : function(result) {//返回数据根据结果进行相应的处理            console.log("ajax post接收后台数据:");            console.log(result);            json=result;        },        //异常处理        error:function (XMLHttpRequest, textStatus, errorThrown) {            console.log(XMLHttpRequest+"---"+textStatus+"---"+errorThrown)        }    });    return json;}

封装提交的参数

上面的两种ajax方法支持直接提交object对象
这里是上面方法调用的对象解析方法:

/** * 获取json对象中的所有参数名称 * @param obj * @returns {Array} */function getObjKeys(obj){    var params = [];//要提交的参数名称    for (var p in obj){        if (obj.hasOwnProperty(p)){            params.push(p);        }    }    return params;}/** * 获取json对象中的所有value值 * @param obj * @param keys 属性名称数组 * @returns {Array} */function getObjValues(obj,keys) {    var values=[];//要提交的参数值    for (var i = 0;i<keys.length;i++){        values.push(obj[keys[i]])    }    return values;}/** * 将两个数组按照search的方式连接起来 * @param params * @param values * @param hasParam 是否有参数 */function joinStr(params, values,hasParam) {    var str="";    if (hasParam==""||hasParam==null){        str="?"    }else{        str="&"    }   if (params.length!=values.length){       console.log("拼接url参数时异常,参数之间长度不匹配")       return null;   }else{       for(var i = 0;i<params.length;i++){           if (i==(params.length-1)){               str+=params[i]+"="+values[i];           }else{               str+=params[i]+"="+values[i]+"&";           }       }   }   return str;}
原创粉丝点击