• 【jQuery】form表单元素序列化为json对象


      序列化form表单元素为json对象: 

     1  <!Doctype html>
     2  <html xmlns=http://www.w3.org/1999/xhtml>
     3  <head>
     4  <title>jQuery扩展——form序列化到json对象</title>
     5  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
     6  <script type="text/javascript" src="jquery-1.10.2.js"></script>
     7 </head>
     8 <body>
     9 <p id="results"><b>Results:</b> </p>
    10 <form>
    11   <select name="aModel.single">
    12     <option>Single</option>
    13     <option selected>Single2</option>
    14   </select>
    15   <br/><br/>
    16   <select name="aModel.multiple" multiple="multiple">
    17     <option selected="selected">Multiple</option>
    18     <option>Multiple2</option>
    19     <option selected="selected">Multiple3</option>
    20   </select>
    21   <br/><br/>
    22   <input type="checkbox" name="aModel.check" value="check1"/> check1
    23   <input type="checkbox" name="aModel.check" value="check2" checked="checked"/> check2
    24   <br/><br/>
    25   <input type="radio" name="aModel.radio" value="radio1" checked="checked"/> radio1
    26   <input type="radio" name="aModel.radio" value="radio2"/> radio2
    27 </form>
    28 
    29 <script type="text/javascript">
    30     var fields = $("select, :radio").serializeArray();
    31     var o={};
    32     jQuery.each(fields, function(i, fields){
    33         if(o[this.name]){
    34             /*
    35             表单中可能有多个相同标签,比如有多个label,
    36             那么你在json对象o中插入第一个label后,还要继续插入,
    37             那么这时候o[label]在o中就已经存在,所以你要把o[label]做嵌套数组处理
    38             */
    39             //如果o[label]不是嵌套在数组中
    40             if(!o[this.name].push){
    41                 o[this.name]=[o[this.name]];     // 将o[label]初始为嵌套数组,如o={a,[a,b,c]}
    42             }
    43             o[this.name].push(this.value || ''); // 将值插入o[label]
    44         }else{
    45             o[this.name]=this.value || '';       // 第一次在o中插入o[label]
    46         }
    47     });
    48     $("#results").append(JSON.stringify(o));
    49     console.log(o);    //用FireBug输出
    50 </script>
    51 
    52 </body>
    53 </html>

    结果如下图所示:

  • 相关阅读:
    LVS实现负载均衡原理及安装配置 负载均衡
    Jexus-5.6.3使用详解
    公共笔记
    net 网站过滤器 mvc webapi
    WebApi 生成帮助文档及顺便创建简单的测试工具
    Dapper.NET——轻量ORM
    C# Entity Framework并发处理
    linq 日常关键字使用
    解决nginx负载均衡的session共享问题
    table中实现数据上移下移效果
  • 原文地址:https://www.cnblogs.com/ningvsban/p/3659617.html
Copyright © 2020-2023  润新知