jQuery . param( obj, traditional )

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 );

変数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' }
}

をシリアライズした結果を、黄色のボックス要素内に表示したもの。

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>

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>

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>

スポンサード リンク

カテゴリー: Ajax, API, Collection Manipulation, JavaScript, jQuery, その他, フォーム, ヘルパー関数 タグ: パーマリンク