自定义封装Jquery ajax方法

最新推荐文章于 2023-10-18 00:00:00 发布

原创最新推荐文章于 2023-10-18 00:00:00 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #封装 #前端

前端杂事专栏收录该内容

205 篇文章

订阅专栏

本文介绍两种自定义封装的jQuery AJAX方法：GET和POST方式。这两种方法简化了代码，提高了前端与后端交互的效率，并提供了错误处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}