表单序列化

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>

</head>
<body>
    <form method="post" action="#" id="test_form">
        用户名：<input type="text" name="username"/><br>
        密 &nbsp; 码：<input type="password" name="password"><br>
        爱 &nbsp; 好：吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>
        性 &nbsp; 别：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
        学 &nbsp; 校： <select name="school">
                    <option value="yangguang">阳光小学</option>
                    <option value="xiwang">希望小学</option>
                    <option value="tiantian">天天小学</option>
                </select>
        <br><br><br>
        <input type="submit" value="提交"/> &nbsp;&nbsp;<input type="reset" value="重置" />
        <br> <br> <br>
        <input type="button" value="点我序列化为url" id="serializeUrl"/>&nbsp;&nbsp;<input type="button" value="点我序列化为json" id="serializeJson"/>
    </form>

</body>
</html>

一、serialize() 方法介绍

语法：
$(selector).serialize()   

返回值： 

表单内容的字符串格式     通过序列化表单值，创建URL编码文本字符串（类似这样的  格式  a=1&b=2&c

var serializeUrl = $("#test_form").serialize();

.serialize()方法创建以标准URL编码表示的文本字符串

$(function () {
            $("#serializeUrl").click(function () {
                testJquerySerializeUrl();
            });
        });

        function testJquerySerializeUrl() {
            var serializeUrl = $("#test_form").serialize();
            alert("序列化为url格式为："+serializeUrl);
        }

总结：
1、 我们看到输出的结果为表单项中的各表单元素的name值和value值
2、格式是以url参数的形式，第一个参数前面没有&符号

二、serializeArray()方法


1、作用： 序列化表哥元素 返回JSON数据结构数据
2、返回值： 返回的是JSON对象而非JSON字符串

3、返回格式：
[
    {name: 'firstname', value: 'hello'},
    {name: 'firstname1', value: 'hello2'}
]

4、 代码
$(function () {
            $("#serializeUrl").click({"name":"zxy"},function () {
                testJquerySerializeUrl();
               // alert();
            });

            $("#serializeJson").click({},function () {
                 testJquerySerializeJson();
            });

        });

        function testJquerySerializeJson() {
            var serializeJson = $("#test_form").serializeArray();
            alert("序列化为json格式为："+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串

        }

5、注意：

使用 .serializeArray()方法 元素不能被禁用（），并且元素应当含有name属性  提交按钮的值不会被序列化，文件选择元素也不会被序列化。

猜你喜欢