jQuery API の jQuery . param( obj, traditional ) は、URLクエリ文字列やAjaxリクエストで使用するため、配列やオブジェクトを、シリアライズするメソッド。
引数
- obj
シリアライズする配列やオブジェクト。
- traditional
booleanType(論理型)。
浅いシリアライズをするかどうかのブール値。
true:浅いシリアライズ。
false:深いシリアライズ。PHPやRuby on Railsなどの近代的なスクリプト言語やフレームワークに対応するためのシリアライズ。
浅いシリアライズと深いシリアライズの、具体的な違いは、下記の実装例(サンプル)を参照。
記述方法
jQuery . param( オブジェクト );
オブジェクトを、シリアライズする。
記述例
var object = {
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
var result = jQuery . param( object );
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
var result = jQuery . param( object );
変数objectの内容を、シリアライズし、変数resultに格納。
実装例(サンプル)
- jQuery . param( object )
- decodeURIComponent( jQuery . param( object ) )
- jQuery . param( object, true )
- decodeURIComponent( jQuery . param( object ), true )
実装例(サンプル)について
var object = {
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
をシリアライズした結果を、黄色のボックス要素内に表示したもの。
jQuery . param( object )は、深いシリアライズ。
decodeURIComponent( jQuery . param( object ) )は、jQuery . param( object )をURIデコードした結果。
jQuery . param( object, true )は、浅いシリアライズ。
decodeURIComponent( jQuery . param( object, true ) )は、jQuery . param( object, true )をURIデコードした結果。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var object = {
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
var result1 = jQuery . param( object );
var result2 = decodeURIComponent( jQuery . param( object ) );
var result3 = jQuery . param( object, true );
var result4 = decodeURIComponent( jQuery . param( object ), true );
jQuery( '#jquery-sample-result-1' ) . text( result1 );
jQuery( '#jquery-sample-result-2' ) . text( result2 );
jQuery( '#jquery-sample-result-3' ) . text( result3 );
jQuery( '#jquery-sample-result-4' ) . text( result4 );
} );
// -->
</script>
<!--
jQuery( function() {
var object = {
string: 'value',
array: [ 'item1', 'item2', 'item3' ],
map: { key1: 'value1', key2: 'value2' }
}
var result1 = jQuery . param( object );
var result2 = decodeURIComponent( jQuery . param( object ) );
var result3 = jQuery . param( object, true );
var result4 = decodeURIComponent( jQuery . param( object ), true );
jQuery( '#jquery-sample-result-1' ) . text( result1 );
jQuery( '#jquery-sample-result-2' ) . text( result2 );
jQuery( '#jquery-sample-result-3' ) . text( result3 );
jQuery( '#jquery-sample-result-4' ) . text( result4 );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample dd {
margin-left: 10px;
margin-bottom: 5px;
padding: 5px 10px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample dd {
margin-left: 10px;
margin-bottom: 5px;
padding: 5px 10px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<dl id="jquery-sample">
<dt>jQuery . param( object )</dt>
<dd><p id="jquery-sample-result-1"></p></dd>
<dt>decodeURIComponent( jQuery . param( object ) )</dt>
<dd><p id="jquery-sample-result-2"></p></dd>
<dt>jQuery . param( object, true )</dt>
<dd><p id="jquery-sample-result-3"></p></dd>
<dt>decodeURIComponent( jQuery . param( object ), true )</dt>
<dd><p id="jquery-sample-result-4"></p></dd>
</dl>
<dt>jQuery . param( object )</dt>
<dd><p id="jquery-sample-result-1"></p></dd>
<dt>decodeURIComponent( jQuery . param( object ) )</dt>
<dd><p id="jquery-sample-result-2"></p></dd>
<dt>jQuery . param( object, true )</dt>
<dd><p id="jquery-sample-result-3"></p></dd>
<dt>decodeURIComponent( jQuery . param( object ), true )</dt>
<dd><p id="jquery-sample-result-4"></p></dd>
</dl>