纯js将form表单的数据封装成json 以便于ajax发送
2013-12-10 09:15
751 查看
使用方式:
var json = form2Json("formId");//这里的参数是form表单的id值
form2json.js
var json = form2Json("formId");//这里的参数是form表单的id值
form2json.js
function form2Json(formName){ var form=document.getElementById(formName); var sb=new StringBuilder();var rcs=new Map(); for ( var i = 0; i < form.elements.length; i++){ var element = form.elements[i]; var name = element.name; if (typeof (name) === "undefined" || (name === null) || (name.length === 0)){continue;} var tagName = element.tagName; if(tagName ==='INPUT'||tagName === 'TEXTAREA'){var type = element.type; if ((type === 'text')||(type === 'password') || (type === 'hidden') || (tagName === 'TEXTAREA')){ sb.append("\""+name+"\":\""+encodeURIComponent(element.value.replace(/\r\n/ig,""))+"\""); }else if((type === 'checkbox') || (type === 'radio')){ rcs.putOverride(name,type); }else{continue;} }else if (tagName === 'SELECT'){var oc = element.options.length; for ( var j = 0; j <oc; j++){ if (element.options[j].selected){sb.append("\""+name+"\":\""+(element.value)+"\"");} } } } if(rcs.size()>0){ for(var i=0;i<rcs.size();i++){ var r=rcs.element(i);var radio=""; var d=document.getElementsByName(r.key); if(r.value==="radio"){ for(j=0;j<d.length;j++){ if(d[j].checked){radio=d[j].value;} } }else{ for(j=0;j<d.length;j++){ if(d[j].checked){radio+=","+d[j].value;} } radio.substr(1); } sb.append("\""+r.key+"\":\""+radio+"\""); } } return "{"+sb.toJsonString()+"}"; } function StringBuilder(){ this._element_ = new Array(); this.append = function(item) { this._element_.push(item); } this.toString = function() { return this._element_.join(""); } this.toJsonString = function() { return this._element_.join(","); } this.join = function(separator) { return this._element_.join(separator); } this.length = function() { return this._element_.length; } } function Map() { this.elements = new Array(); // 获取MAP元素个数 this.size = function() { return this.elements.length; } // 判断MAP是否为空 this.isEmpty = function() { return (this.elements.length < 1); } // 删除MAP所有元素 this.clear = function() { this.elements = new Array(); } // 向MAP中增加元素(key, value) this.put = function(_key, _value) { this.elements.push({key : _key,value : _value}); } //增加元素并覆盖 this.putOverride = function(_key,_value){ this.remove(_key); this.put(_key,_value); } // 删除指定KEY的元素,成功返回True,失败返回False this.remove = function(_key) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key) { this.elements.splice(i, 1); return true; } } } catch (e) { bln = false; } return bln; } // 获取指定KEY的元素值VALUE,失败返回NULL this.get = function(_key) { try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key) { return this.elements[i].value; } } } catch (e) { return null; } } // 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL this.element = function(_index) { if (_index < 0 || _index >= this.elements.length) { return null; } return this.elements[_index]; } // 判断MAP中是否含有指定KEY的元素 this.containsKey = function(_key) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key) { bln = true; } } } catch (e) { bln = false; } return bln; } // 判断MAP中是否含有指定VALUE的元素 this.containsValue = function(_value) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].value == _value) { bln = true; } } } catch (e) { bln = false; } return bln; } // 获取MAP中所有VALUE的数组(ARRAY) this.values = function() { var arr = new Array(); for (i = 0; i < this.elements.length; i++) { arr.push(this.elements[i].value); } return arr; } // 获取MAP中所有KEY的数组(ARRAY) this.keys = function() { var arr = new Array(); for (i = 0; i < this.elements.length; i++) { arr.push(this.elements[i].key); } return arr; } }
相关文章推荐
- JS将form表单转换为json数据,使用ajax发送请求案例
- Ajax发送FormData对象封装的表单数据
- js将form表单提交数据封装为ajax提交
- jquery序列化form表单使用ajax提交后处理返回的json数据
- jQuery插件:Ajax将Json数据自动绑定到Form表单
- 将表单序列化之后变成的json格式的数据无法通过Ajax发送到后台的解决
- js封装from表单数据为json串进行ajax提交
- jquery序列化form表单使用ajax提交后处理返回的json数据
- spring security的ajax提交和json返回数据--兼容form表单提交
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- JS自动获取Form表单数据并转换成键值对 ajax提交Form
- $.ajax() 方法中对data值进行封装。serializeJson() 可以是form表单,也可以是单个元素对象
- ajax提交form表单数据serialize转为JSON
- .js循环读写通过ajax发送并返回的json数据
- 将form表单里的数据封装成对象 json2.js的例子 jquery的serialize方法转换空格为+号的解决方法
- jQuery通过ajax获得后台json数据给form表单赋值
- 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
- jquery序列化form表单使用ajax提交后处理返回的json数据
- js form表单发送数据两种方式(post get)区别
- js控件封装form表单数据