━目次━
jQueryを使っていて、formタグで囲ったデータをajaxでサーバサイドに送りたい時なんかにserializeして送ると思います。
このserializeですが『serialize()』と『serializeArray()』があります。
・何が違うのか
・どう使い分けるのか
について解説します！
じゃけぇ Let’s しりあらいず～
serialize()とserializeArray()の違い(言葉編)
まず言葉で説明すると、
serialize()はURLエンコードされたクエリ文字列を生成
するのに対し
serializeArray()はJSON形式の文字列(nameとvalueで構成される配列)を生成
します
考える人 分からん！
じゃけぇ だろうね(笑)じゃあソースで見てみよう
serialize()とserializeArray()の違い(ソース編)
実際に２つのテキストボックスの値をシリアライズしたあとのデータを確認してみましょう。
serialize()の場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $("#submitButton").click(function(){ //formをserializeする var serializeData = $("#testForm").serialize(); //シリアライズ後のデータを確認 console.log(serializeData); }) </script> <form id="testForm"> <input type="text" name="textA" value="AAA" /> <input type="text" name="textB" value="BBB" /> </form> <input type="button" id="submitButton" value="送信" /> |
textA=AAA&textB=BBB
考える人 よく見るURLのケツに付いとるやつじゃの！
serializeArray()の場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $("#submitButton").click(function(){ //formをserializeする var serializeArrayData = $("#testForm").serializeArray(); //シリアライズ後のデータを確認 console.log(JSON.stringify(serializeArrayData)); }) </script> <form id="testForm"> <input type="text" name="textA" value="AAA" /> <input type="text" name="textB" value="BBB" /> </form> <input type="button" id="submitButton" value="送信" /> |
[{“name”:”textA”,”value”:”AAA”},{“name”:”textB”,”value”:”BBB”}]
考える人 これがJSON形式ってやつか？
じゃけぇ そうそう。nameとvalueにテキストボックスのname値とvalue値が格納されているね
serialize()とserializeArray()の使い分け
上記のようにserialize()とserializeArray()は生成される文字列が異なりますが、サーバサイドではFormクラスで受け取ることができるので、どちらで送られてきたかを意識する必要はありません。
ではどちらを使用するほうが良いのかと言うと、単にform内の要素を送信するだけならどっちでも良いです。
ただ私は単にform内の要素を送信するだけならserialize()を使うようにしています。
理由は、上記で見たようにJSON形式のほうが文字列が長い(やりとりするデータ量が多い)からです。
まぁ今の時代この程度の差なんか大した問題じゃないですがシンプルに越したことはありません。
考える人 じゃあserializeArray()は使わんでええんじゃないか？
じゃけぇ いやそれがserializeArray()はデータ要素を追加する場合には便利なんだよ
例えば↓のように別formの要素も一緒に送りたい場合、serializeArray()は要素の追加が簡単に行えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> $("#submitButton").click(function(){ //formをserializeする var serializeArrayData = $("#testForm").serializeArray(); //要素を追加する //配列名.push({name: (name値), value: (value値)})で追加できる //$("#textC").attr("name")でname値を取得し、$("#textC").val()でvalue値を取得している serializeArrayData.push({name:$("#textC").attr("name"), value:$("#textC").val()}); //シリアライズ後のデータを確認 console.log(JSON.stringify(serializeArrayData)); }) </script> <form id="testForm"> <input type="text" name="textA" value="AAA" /> <input type="text" name="textB" value="BBB" /> </form> <form id="testForm2"> <input type="text" id="textC" name="textC" value="CCC" /> </form> <input type="button" id="submitButton" value="送信" /> |
[{“name”:”textA”,”value”:”AAA”},{“name”:”textB”,”value”:”BBB”},{“name”:”textC”,”value”:”CCC”}]
考える人 おーなるほど！確かにこれは使い道ありそうじゃの！
さいごに
ポイントをまとめます
serialize()はクエリ文字列を生成
serializeArray()はJSON文字列を生成
単純なシリアライズならserialize()で良い
要素の追加などをしたい場合はserializeArray()が良い
とまぁこんな感じですね！
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
