jQuery实现form表单元素序列化为json对象的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法。分享给大家供大家参考，具体如下：

这段代码序列化form表单元素为json对象：

<!Doctype html>
 <html xmlns=http://www.w3.org/1999/xhtml>
 <head>
 <title>jQuery扩展——form序列化到json对象</title>
 <meta http-equiv=Content-Type content=\"text/html;charset=utf-8\">
 <script type=\"text/javascript\" src=\"jquery-1.10.2.js\"></script>
</head>
<body>
<p id=\"results\"><b>Results:</b> </p>
<form>
 <select name=\"aModel.single\">
 <option>Single</option>
 <option selected>Single2</option>
 </select>
 <br/><br/>
 <select name=\"aModel.multiple\" multiple=\"multiple\">
 <option selected=\"selected\">Multiple</option>
 <option>Multiple2</option>
 <option selected=\"selected\">Multiple3</option>
 </select>
 <br/><br/>
 <input type=\"checkbox\" name=\"aModel.check\" value=\"check1\"/> check1
 <input type=\"checkbox\" name=\"aModel.check\" value=\"check2\" checked=\"checked\"/> check2
 <br/><br/>
 <input type=\"radio\" name=\"aModel.radio\" value=\"radio1\" checked=\"checked\"/> radio1
 <input type=\"radio\" name=\"aModel.radio\" value=\"radio2\"/> radio2
</form>
<script type=\"text/javascript\">
 var fields = $(\"select, :radio\").serializeArray();
 var o={};
 jQuery.each(fields, function(i, fields){
  if(o[this.name]){
   /*
   表单中可能有多个相同标签，比如有多个label，
   那么你在json对象o中插入第一个label后，还要继续插入，
   那么这时候o[label]在o中就已经存在，所以你要把o[label]做嵌套数组处理
   */
   //如果o[label]不是嵌套在数组中
   if(!o[this.name].push){
    o[this.name]=[o[this.name]];  // 将o[label]初始为嵌套数组，如o={a,[a,b,c]}
   }
   o[this.name].push(this.value || \'\'); // 将值插入o[label]
  }else{
   o[this.name]=this.value || \'\';  // 第一次在o中插入o[label]
  }
 });
 $(\"#results\").append(JSON.stringify(o));
 console.log(o); //用FireBug输出
</script>
</body>
</html>

结果如下图所示：

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4669

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案