デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.param( )配列やオブジェクトをシリアライズ

構文

配列やオブジェクトをシリアライズ返値:文字列
jQuery.param( object )ver1.2〜
jQuery.param( object, traditional )ver1.4〜
引数のtraditionalはブール値で設定します。
trueを設定すると深い場所にあるデータをシリアライズしないようにします。デフォルトはfalseです。

機能

jQuery.paramは配列やオブジェクトをURLクエリ文字列やAjaxリクエストで使用するのに適したの文字列に変換(シリアライズ)します。

jQuery.paramはv1.4から近代的なスクリプト言語やフレームワーク(phpやRuby on Railsなど)に対応するため、配列やobjectオブジェクトもシリアライズできるようになりました。しかしv1.4以前のシリアライズに戻したい場合は、引数「traditional」をtrueに設定します。

jQuery.ajaxメソッドのtraditionalプロパティの設定の方が優先されます。

解説

配列やオブジェクトをシリアライズする

サンプル(param/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryでは、まず以下の部分を確認して下さい。シリアライズするテスト用のobjectオブジェクトを作成しています。

var testObj = new Object();
testObj.name = "john";
testObj.data = ["aaa", "bbb"];

続いて以下の部分を確認して下さい。buttonをクリックしたら、上記で作成したtestObjをシリアライズしtextメソッドを利用してdiv要素内に表示します。

$("button").click(function(){
	var str = $.param(testObj);
	$("div").text(str);
});

結果として、buttonをクリックするとdiv要素内にシリアライズされた文字列が表示されます。

引数「traditional」をtrueにする

引数「traditional」をtrueにすると、v1.4以前の形式(近代的なスクリプト言語などには対応不十分な形式)でシリアライズします。サンプル(param/02.html)を開いてbody内の構成がparam/01.htmlと同じ事を確認してください。jQueryもparam/01.htmlとほとんど同じで、異なるのは以下の様に引数にtrueを追加している点だけです。

$("button").click(function(){
	var str = $.param(testObj, true);
	$("div").text(str);
});

結果として、buttonをクリックするとdiv要素内にv1.4以前の形式でシリアライズされたデータが表示されます。ちなみにfalseを設定するとparam/01.htmlと同じ結果になります。→参考:サンプル(param/02b.html

関連項目

objectオブジェクトや配列ではなく、formの内容をシリアライズしたい場合はserializeメソッドを利用して下さい。

メモ

私はサーバーサイドとの連携経験がないため、引数「traditional」のtrue/falseによる差がどのように機能するか分からないのですが、trueに設定した場合(param/02.html)は配列のデータが「data=aaa」と「data=bbb」のように変数と同じようにシリアライズされるため、複雑なデータの変換には向かないと理解しました(配列やオブジェクトを利用しないのであればtrueで問題ないと思います)。

それに対し、デフォルトの設定(param/01.html)では「data%5B%5D=aaa」と「data%5B%5D=bbb」となり(%5B%5Dはurlエンコードで[]を指します)、配列のデータであることを明示しています。そのため配列やオブジェクトを利用したデータのシリアライズにも対応できるのでしょう。たぶん。