jQuery序列化元素

最新推荐文章于 2024-08-04 16:33:59 发布

angyuhh07719

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量86

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xieshuang/p/6054272.html

版权

学习了一下jQury序列化，分为两个方法，整理如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script src="./jquery-1.8.1.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("#sendButton").click(function(){
                //方法1 serialize()方法，该方法作用于一个jQuery对象，能够将DOM元素内容序列化成字符串
                //该方法能够对中文进行编码处理，相应的需要进行解码处理
                //该方法的核心是$.params()方法，用来将一个数组或者对象按照k/v进行序列化
                var obj1 = $("#testForm").serialize();
                console.log(decodeURIComponent(obj1,true));

                //方法2 serializeArray()方法，将用作提交的表单元素的值编译成拥有name和value对象组成的数组。例如[ { name: a value: 1 }, { name: b value: 2 },...]
                var obj2 = $("#testForm").serializeArray();
                console.log(obj2);
            })
        })
    </script>
</head>
<body>
    <form id="testForm" action="#">
        <input name = "name" placeholder="姓名"/>
        <input name = "age" placeholder="年龄"/>
        <input name = "height" placeholder="身高"/>
        <input name = "hometown" placeholder="家乡"/>
        <input id="sendButton" type="button" value="click"></input>
    </form>
</body>
</html>

API中并没有提供直接序列化成json对象的方法，可以在现有方法的基础上，稍作修改即可：

<script type="text/javascript">  
    $(function() {  
        $("#sendButton").click(function() {  
                var datas = $("#testForm").serializeJsonObj(); 
                console.log(datas);  
            })  
    })        
    $.fn.serializeJsonObj = function() {  
        var result = {};  
        var temp = this.serializeArray();  
        $.each(temp, function() {  
            if (result[this.name]) {  
                if (!result[this.name].push) {  
                    result[this.name] = [ result[this.name] ];  
                }  
                result[this.name].push(this.value || '');  
            } else {  
                result[this.name] = this.value || '';  
            }  
        });  
        return result;  
    }  
</script>

转载于:https://www.cnblogs.com/xieshuang/p/6054272.html

angyuhh07719

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery序列化元素

学习了一下jQury序列化，分为两个方法，整理如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title> &...
复制链接

扫一扫