表單序列化

時間 2019-11-17

標籤表單序列欄目 HTML 简体版

原文原文鏈接

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

1、serialize() 方法介紹html

語法：
$(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);
        }

總結：
一、 咱們看到輸出的結果爲表單項中的各表單元素的name值和value值
二、格式是以url參數的形式，第一個參數前面沒有&符號

2、serializeArray()方法jquery

一、做用： 序列化表哥元素 返回JSON數據結構數據
二、返回值： 返回的是JSON對象而非JSON字符串

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

四、 代碼
$(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字符串

        }

五、注意：

使用 .serializeArray()方法 元素不能被禁用（），而且元素應當含有name屬性  提交按鈕的值不會被序列化，文件選擇元素也不會被序列化。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。