使用方式:

var json = form2Json("formId");//这里的参数是form表单的id值

form2json.js

  1. function form2Json(formName){
  2. var form=document.getElementById(formName);
  3. var sb=new StringBuilder();var rcs=new Map();
  4. for ( var i = 0; i < form.elements.length; i++){
  5. var element = form.elements[i]; var name = element.name;
  6. if (typeof (name) === "undefined" || (name === null) || (name.length === 0)){continue;}
  7. var tagName = element.tagName;
  8. if(tagName ==='INPUT'||tagName === 'TEXTAREA'){var type = element.type;
  9. if ((type === 'text')||(type === 'password') || (type === 'hidden') || (tagName === 'TEXTAREA')){
  10. sb.append("\""+name+"\":\""+encodeURIComponent(element.value.replace(/\r\n/ig,""))+"\"");
  11. }else if((type === 'checkbox') || (type === 'radio')){
  12. rcs.putOverride(name,type);
  13. }else{continue;}
  14. }else if (tagName === 'SELECT'){var oc = element.options.length;
  15. for ( var j = 0; j <oc; j++){
  16. if (element.options[j].selected){sb.append("\""+name+"\":\""+(element.value)+"\"");}
  17. }
  18. }
  19. }
  20. if(rcs.size()>0){
  21. for(var i=0;i<rcs.size();i++){
  22. var r=rcs.element(i);var radio="";
  23. var d=document.getElementsByName(r.key);
  24. if(r.value==="radio"){
  25. for(j=0;j<d.length;j++){
  26. if(d[j].checked){radio=d[j].value;}
  27. }
  28. }else{
  29. for(j=0;j<d.length;j++){
  30. if(d[j].checked){radio+=","+d[j].value;}
  31. }
  32. radio.substr(1);
  33. }
  34. sb.append("\""+r.key+"\":\""+radio+"\"");
  35. }
  36. }
  37. return "{"+sb.toJsonString()+"}";
  38. }
  39.  
  40. function StringBuilder(){
  41. this._element_ = new Array();
  42. this.append = function(item) {
  43. this._element_.push(item);
  44. }
  45. this.toString = function() {
  46. return this._element_.join("");
  47. }
  48. this.toJsonString = function() {
  49. return this._element_.join(",");
  50. }
  51. this.join = function(separator) {
  52. return this._element_.join(separator);
  53. }
  54. this.length = function() {
  55. return this._element_.length;
  56. }
  57. }
  58. function Map() {
  59. this.elements = new Array();
  60. // 获取MAP元素个数
  61. this.size = function() {
  62. return this.elements.length;
  63. }
  64. // 判断MAP是否为空
  65. this.isEmpty = function() {
  66. return (this.elements.length < 1);
  67. }
  68. // 删除MAP所有元素
  69. this.clear = function() {
  70. this.elements = new Array();
  71. }
  72. // 向MAP中增加元素(key, value)
  73. this.put = function(_key, _value) {
  74. this.elements.push({key : _key,value : _value});
  75. }
  76. //增加元素并覆盖
  77. this.putOverride = function(_key,_value){
  78. this.remove(_key);
  79. this.put(_key,_value);
  80. }
  81. // 删除指定KEY的元素,成功返回True,失败返回False
  82. this.remove = function(_key) {
  83. var bln = false;
  84. try {
  85. for (i = 0; i < this.elements.length; i++) {
  86. if (this.elements[i].key == _key) {
  87. this.elements.splice(i, 1);
  88. return true;
  89. }
  90. }
  91. } catch (e) {
  92. bln = false;
  93. }
  94. return bln;
  95. }
  96.  
  97. // 获取指定KEY的元素值VALUE,失败返回NULL
  98. this.get = function(_key) {
  99. try {
  100. for (i = 0; i < this.elements.length; i++) {
  101. if (this.elements[i].key == _key) {
  102. return this.elements[i].value;
  103. }
  104. }
  105. } catch (e) {
  106. return null;
  107. }
  108. }
  109. // 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
  110. this.element = function(_index) {
  111. if (_index < 0 || _index >= this.elements.length) {
  112. return null;
  113. }
  114. return this.elements[_index];
  115. }
  116. // 判断MAP中是否含有指定KEY的元素
  117. this.containsKey = function(_key) {
  118. var bln = false;
  119. try {
  120. for (i = 0; i < this.elements.length; i++) {
  121. if (this.elements[i].key == _key) {
  122. bln = true;
  123. }
  124. }
  125. } catch (e) {
  126. bln = false;
  127. }
  128. return bln;
  129. }
  130. // 判断MAP中是否含有指定VALUE的元素
  131. this.containsValue = function(_value) {
  132. var bln = false;
  133. try {
  134. for (i = 0; i < this.elements.length; i++) {
  135. if (this.elements[i].value == _value) {
  136. bln = true;
  137. }
  138. }
  139. } catch (e) {
  140. bln = false;
  141. }
  142. return bln;
  143. }
  144. // 获取MAP中所有VALUE的数组(ARRAY)
  145. this.values = function() {
  146. var arr = new Array();
  147. for (i = 0; i < this.elements.length; i++) {
  148. arr.push(this.elements[i].value);
  149. }
  150. return arr;
  151. }
  152. // 获取MAP中所有KEY的数组(ARRAY)
  153. this.keys = function() {
  154. var arr = new Array();
  155. for (i = 0; i < this.elements.length; i++) {
  156. arr.push(this.elements[i].key);
  157. }
  158. return arr;
  159. }
  160. }

纯js将form表单的数据封装成json 以便于ajax发送的更多相关文章

  1. jQuery将form表单的数据封装成json对象

    /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...

  2. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  3. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  4. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  5. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  6. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  7. 第十七篇 JS验证form表单

    JS验证form表单   这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...

  8. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  9. 参数传递的四种形式----- URL,超链接,js,form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

随机推荐

  1. ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值

    检查插入的值是否大于该字段数据类型约束的长度. 这个异常是指,用户向数据库执行插入数据操作时,某条数据的某个字段值过长,如 果是varchar2类型的,当长度超过2000,--4000(最大值)之间的 ...

  2. javascript-03

    1.Object   |-1.var  变量=new Object();         |-变量.自定义的属性='值';     |-变量.自定义名称=function(){}   |-2.var ...

  3. Android开发环境搭建(2015年8月更新)

    1.  下载和安装Android SDK Android的官方站点是http://www.android.com: 登录https://developer.android.com/intl/zh-cn ...

  4. Apache+Tomcat +mod_proxy集群负载均衡及session

      序言: 在玩Apache+Tomcat +mod_jk集群负载均衡及session的时候发现,还有一种方式可以实现,就是网上各位大牛们说的mod_proxy反向代理. 实在弄的我的知识细胞洋洋.实 ...

  5. JavaSE生成随机数

    今天呢,老师讲了一下怎么用jvm实现随机数(本人对此很感兴趣),一个简单的随机100以内整数的代码如下: /** 生成随机数 */ import java.util.Random; public cl ...

  6. postgres 利用unique index代替 primay key

    create UNIQUE INDEX uniq_index_piwik_log_action_idaction on piwik_log_action(idaction);   这样做的好处: 1. ...

  7. STL之优先队列

    STL 中优先队列的使用方法(priority_queu) 基本操作: empty() 如果队列为空返回真 pop() 删除对顶元素 push() 加入一个元素 size() 返回优先队列中拥有的元素 ...

  8. 图像储存容器Mat[OpenCV 笔记11]

    IplImage 与 Mat IplImage是OpenCV1中的图像存储结构体,基于C接口创建.在退出之前必须release,否则就会造成内存泄露.在一些只能使用C语言的嵌入式系统中,不得不使用. ...

  9. zoj 3686 A Simple Tree Problem (线段树)

    Solution: 根据树的遍历道的时间给树的节点编号,记录下进入节点和退出节点的时间.这个时间区间覆盖了这个节点的所有子树,可以当做连续的区间利用线段树进行操作. /* 线段树 */ #pragma ...

  10. Scala - error: not found: value SortedMap

    先 IMPORT!!!! scala> import scala.collection._import scala.collection._ scala>  SortedMap(" ...