serializeArray()與 serialize()

標籤：

  

 

serialize()序列表表格內容為字串，用於 Ajax 請求。

serializeArray()序列化表格元素 (類似 ‘.serialize()‘ 方法) 返回 JSON 資料結構資料。

.serializeArray()

編碼一個form元素集合為一個“name屬性值/value屬性值”的數組。json結構，如：

[  {    name: a    value: 1  },  {    name: b    value: 2  },  {    name: c    value: 3  },  {    name: d    value: 4  },  {    name: e    value: 5  }].serialize()

 

編碼一個form元素集合為有充的字串。字串為標準的url編碼。如：

a=1&b=2&c=3&d=4&e=5

<form>    <!-- 能夠被json數組、url字串據提取資料類型 -->    <input type="text" name="a" value="1" id="a" />    <input type="text" name="b" value="2" id="b" />    <input type="hidden" name="c" value="3" id="c" />    <textarea name="d" rows="8" cols="40">4</textarea>    <select name="e">            <option value="5" selected="selected">5</option>            <option value="6">6</option>            <option value="7">7</option>      </select>        <input type="checkbox" name="f" value="8" id="f1" checked="checked" />        <input type="checkbox" name="f" value="9" id="f2" />        <input type="radio" name="g" value="10" id="g1"/>    <input type="radio" name="g" value="11" checked="checked" id="g2"/>        <input type="password" name="h" maxlength="8" value="h" />    <!-- 不能夠被json、url字串據提取資料類型 -->           <input type="submit" name="i" value="Submit" id="i" />        <input type="button" name="j" value="Click me" onclick="msg()" />        <input type="file" name="k" /><br />        <input type="reset" value="Reset"  name="l" />        <input type="image" src="/i/eg_submit.jpg" alt="Submit" /></form><p><tt id="results"></tt></p><script>    function showValues() {      var fields = $(":input").serializeArray();      $("#results").empty();      jQuery.each(fields, function(i, field){        $("#results").append(field.value + " ");      });    }    $(":checkbox, :radio").click(showValues);    $("select").change(showValues);    showValues();</script><script>    function showValues() {      var str = $("form").serialize();      $("#results").text(str);    }    $(":checkbox, :radio").click(showValues);    $("select").change(showValues);    showValues();</script>

 

serializeArray()與 serialize()