返回顶部

收藏

jQuery序列化表单为JSON对象

更多
    <form id="myform">  
        <table>  
            <tr>  
                <td>姓名:</td>  
                <td> <input type="text" name="name" /> </td>  
            </tr>  
            <tr>  
                <td>性别:</td>  
                <td>  
                    <input type="radio" name="sex" value="1"> 男  
                    <input type="radio" name="sex" value="0"> 女  
                </td>  
            </tr>  
            <tr>  
                <td>年龄:</td>  
                <td>  
                    <select name="age">  
                        <option value="20">20</option>  
                        <option value="21">21</option>  
                        <option value="22">22</option>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td>爱好</td>  
                <td>  
                    <input type="checkbox" value="basketball" name="hobby">篮球  
                    <input type="checkbox" value="volleyball" name="hobby">排球  
                    <input type="checkbox" value="football" name="hobby">足球  
                    <input type="checkbox" value="earth" name="hobby">地球  
                </td>  
            </tr>  
            <tr>  
                <td colspan="2">  
                    <input type="button" id="ajaxBtn" value="提交" />  
                </td>  
            </tr>  
        </table>  
    </form>  
    <script type="text/javascript">  

        $(function() {  
            $("#ajaxBtn").click(function() {  
                    var params = $("#myform").serializeObject(); //将表单序列化为JSON对象   
                    console.info(params);  
                })  
        })  

        $.fn.serializeObject = function() {  
            var o = {};  
            var a = this.serializeArray();  
            $.each(a, function() {  
                if (o[this.name]) {  
                    if (!o[this.name].push) {  
                        o[this.name] = [ o[this.name] ];  
                    }  
                    o[this.name].push(this.value || '');  
                } else {  
                    o[this.name] = this.value || '';  
                }  
            });  
            return o;  
        }  
    </script>  

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象