search

Home  >  Article  >  Web Front-end  >  jQuery implements the method of serializing form elements into json objects_jquery

jQuery implements the method of serializing form elements into json objects_jquery

WBOY
WBOYOriginal
2016-05-16 15:26:491471browse

The example in this article describes how jQuery implements the serialization of form elements into json objects. Share it with everyone for your reference, the details are as follows:

This code serializes form elements into json objects: 

<!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>

The result is as shown below:

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Compilation of JavaScript knowledge points_javascript skillsNext article：Compilation of JavaScript knowledge points_javascript skills

Related articles

See more