• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります





jQueryを使っていて、formタグで囲ったデータをajaxでサーバサイドに送りたい時なんかにserializeして送ると思います。

このserializeですが『serialize()』『serializeArray()』があります。

・何が違うのか
・どう使い分けるのか


について解説します!

じゃけぇじゃけぇ

Let’s しりあらいず~

serialize()とserializeArray()の違い(言葉編)

まず言葉で説明すると、

serialize()はURLエンコードされたクエリ文字列を生成



するのに対し

serializeArray()はJSON形式の文字列(nameとvalueで構成される配列)を生成



します

考える人考える人

分からん!

じゃけぇじゃけぇ

だろうね(笑)じゃあソースで見てみよう

serialize()とserializeArray()の違い(ソース編)

実際に2つのテキストボックスの値をシリアライズしたあとのデータを確認してみましょう。

serialize()の場合

▼出力結果▼
textA=AAA&textB=BBB

考える人考える人

よく見るURLのケツに付いとるやつじゃの!

serializeArray()の場合

▼出力結果▼
[{“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()は要素の追加が簡単に行えます。

▼出力結果▼
[{“name”:”textA”,”value”:”AAA”},{“name”:”textB”,”value”:”BBB”},{“name”:”textC”,”value”:”CCC”}]

考える人考える人

おーなるほど!確かにこれは使い道ありそうじゃの!

さいごに

ポイントをまとめます

●Point●
・serialize()はクエリ文字列を生成
・serializeArray()はJSON文字列を生成
・単純なシリアライズならserialize()で良い
・要素の追加などをしたい場合はserializeArray()が良い

とまぁこんな感じですね!


それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-