JavaScript封装Ajax参数传递的完整实现方案
作者:纸飞机时间:2026-10-24 04:24:13浏览:400
本文提供了一套用于封装Ajax传递数据的JavaScript代码实现。通过定义ParamBean类管理参数对象,利用Array原型扩展实现参数的增删查功能,并封装ParamUtils工具类生成标准化的KEY_PARAM和VALUE_PARAM字符串。该方案适用于需要批量传递结构化参数的前端场景,代码包含完整的验证与比较逻辑。
JavaScript封装Ajax参数传递的完整实现方案
具体实现代码如下所示:
首先初始化一个用于存储参数对象的数组:var paramBeanList = new Array();
接着为Array原型添加addParamBean方法,用于向数组中添加参数对象:Array.prototype.addParamBean=function(paramBeanObj){
在添加前,先调用containParamBean方法检查该对象是否已存在,并获取其索引:var index = this.containParamBean(paramBeanObj);
如果检查发现该对象已存在于数组中(索引不为-1):if (index != -1) {
则直接更新该索引位置的对象为新传入的对象:this[index] = paramBeanObj;
如果该对象不存在(索引为-1):} else {
则将该对象推入数组末尾:this.push(paramBeanObj);
}
};
随后定义Array原型的clear方法,用于清空数组内容:Array.prototype.clear=function(){
如果数组长度已经为0,则直接返回:if (this.length == 0) {
直接结束函数执行:return;
}
否则,遍历数组中的所有元素索引:for (var index in this) {
通过pop方法逐个移除数组末尾元素,直到数组为空:this.pop();
}
};
定义Array原型的containParamBean方法,用于判断参数对象是否已存在:Array.prototype.containParamBean=function(paramBeanObj){
初始化索引变量为-1,表示未找到:var index = -1;
如果数组长度为0,直接返回索引-1:if (this.length == 0) {
返回索引值:return index;
}
否则,遍历数组中的每个元素:for (var tempIndex = 0, step = this.length; tempIndex < step; tempIndex++) {
调用元素的compare方法,判断当前元素与传入对象是否相等:if (this[tempIndex].compare(paramBeanObj) == 0) {
如果相等,记录当前索引:index = tempIndex;
并跳出循环:break;
}
}
最后返回查找到的索引值:return index;
};
定义ParamBean构造函数,用于创建参数对象:var ParamBean = new function(pkCode, opDate, value) {
设置主键代码属性:this.pkCode = pkCode;
设置操作日期属性:this.opDate = opDate;
设置值属性:this.value = value;
};
定义ParamBean的原型对象:ParamBean.prototype={
实现toString方法,返回格式化字符串:toString:function() {
返回包含pkCode、opDate和value的字符串:return "[pkCode:" + this.pkCode + ",opDate:" + this.opDate +",value:" + this.value + "]";
},
实现doVerify方法,用于验证参数有效性:doVerify:function() {
通过三元运算符链判断pkCode、opDate和value是否都存在,存在返回"true",否则返回"false":return (this.pkCode ? this.opDate ? this.value ? "true" : "false" : "false" : "false");
},
实现compare方法,用于比较两个对象是否相等:compare:function(otherObj) {
初始化结果为-1:var result = -1;
如果传入的对象存在:if (otherObj) {
比较两个对象的pkCode和opDate是否相等:if (this.pkCode == otherObj.pkCode && this.opDate == otherObj.opDate
并且value也相等:&& this.value == otherObj.value) {
则设置结果为0,表示相等:result = 0;
}
}
返回比较结果:return result;
}
};
定义ParamUtils对象:var ParamUtils = new Object();
定义doCreateAjaxStr方法,用于生成Ajax提交的字符串:ParamUtils.doCreateAjaxStr=function() {
初始化参数字符串为空:var paramStr = "";
如果paramBeanList数组为空,直接返回空字符串:if (paramBeanList.length == 0) {
返回参数字符串:return paramStr;
}
创建两个新数组,分别存储key和value:var keyParamArray = new Array();
创建value参数数组:var valueParamArray = new Array();
遍历paramBeanList数组:for (var index = 0, step = paramBeanList.length; index < step; index++) {
获取当前遍历到的对象:var tempObj = paramBeanList[index];
将pkCode和opDate用反引号连接后推入keyParamArray:keyParamArray.push(tempObj.pkCode + "`" + tempObj.opDate);
将value推入valueParamArray:valueParamArray.push(tempObj.value);
}
拼接最终的参数字符串,包含KEY_PARAM和VALUE_PARAM,并对数组内容进行URL编码:paramStr = "KEY_PARAM=".concat(encodeURIComponent(keyParamArray.join(","))).concat("&").concat("VALUE_PARAM=".concat(encodeURIComponent(valueParamArray.join(","))));
返回生成的参数字符串:return paramStr;
};文章撰写过程中遇到发布问题,在IE6高级编辑器中内容显示为空,最终使用Firefox浏览器成功发布。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
