自定义封装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;}
阅读全文
0 0
- 自定义封装Jquery ajax方法
- jQuery封装的Ajax方法
- JQuery封装的ajax方法
- 方法封装-Ajax+Jquery提交表单
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- 封装jquery中的ajax
- 封装jQuery的ajax
- jQuery Ajax封装
- 封装jquery之ajax
- jquery封装的ajax方法获取web服务器时间
- 自行封装Jquery的ajax的form方法
- jquery.ajax post/get/delete/put 请求方法封装
- 基于jquery的ajax方法的二次封装
- jQuery框架中封装好的ajax方法
- jQuery自定义类封装:
- jQuery自定义类封装
- jQuery ajax - ajax() 方法
- 定义类 和 对象
- JAVA何时使用覆盖(重写)操作
- 阿里云centos7.3下 python3.6 使用 virtualenv 创建独立的虚拟环境
- 关于使用Phalcon [PHQL]:Model could not be loaded
- 乘法口诀表
- 自定义封装Jquery ajax方法
- 继承 和 多继承
- python——赋值与深浅拷贝
- SqlMapConfig.xml配置模板
- hdu1686--kmp入门题
- Java编写冒泡排序及优化
- ros:(1)我的第一个ros文件
- 重写 弗雷方法 和 调用
- 【Node文件系统fs模块】