[ jQuery ] GETパラメータ文字列を作成する ( serialize 関数 )

Tweet

Pocket

ここでは、jQuery の serialize 関数を使用して、フォームやオブジェクトから GET パラメータ文字列を作成するサンプルスクリプトを掲載しています。

サンプルのHTMLファイル

ここでは、以下の HTML を使用しています。

<form id="testForm" >
        <input type="text" name="iName" value="te-- --st" />
        <input type="radio" name="rName" value="OK" checked="checked" />OK
        <input type="radio" name="rName" value="NG" />NG
        <select name="sName">
             <option value="1">1</option>
             <option value="2" selected>2</option>
             <option value="3">3</option>
        </select>
    </form>

GET パラメータの文字列を作成する

上記の HTML から GET パラメータ文字列を作成するサンプルになります。サンプルの結果より、iName の値が URL エンコードされています。半角スペースがエンコードされ、+ に変換されていることがわかります。 エンコード漏れを防ぐこともできるので便利です。

    var getParamStr = $("form#testForm").serialize();

    console.log( getParamStr );

    /*
     * 出力結果
     * ---------------------------------
     * iName=te--+--st&rName=OK&sName=2
     *
     */

オブジェクトを GET パラメータ文字列に変換する

オブジェクトを GET パラメータ文字列に変換するには、$.param 関数を使用して作成することができます。以下が、サンプルになります。

    var obj = {
           param1    : "1",
           paramArray: [ "array1", 100 ],
           param2    : {
                         param2_1: "2 1",
                         param2_2: "2 2"
           }
    };

    getParamStr = $.param(obj);

    console.log( getParamStr );

    /* 
     * 出力結果
     * ----------------------------------------------
     * param1=1&paramArray%5B%5D=array1&paramArray%5B%5D=100&param2%5Bparam2_1%5D=2+1&param2%5Bparam2_2%5D=2+2
     *
     */

URL エンコードされていることはわかりますが、わかり辛いので URL デコードしてみます。jQuery ではデコード関数は用意されていないようですので、Javascript の decodeURIComponent 関数を使用します。

    /*
     * まず、文字列のプラス(+)を手動で %20 に変換している点に注意する必要がある。
     * decodeURIComponent関数ではプラスはプラスのままで変換されないので半角スペースにデコードされない。
     */
    var deStr = decodeURIComponent(getParamStr.replace(/\+/g, '%20'));

    console.log( deStr );

    /*
     * 出力結果
     * ----------------------------------------------
     * param1=1&paramArray[]=array1&paramArray[]=100&param2[param2_1]=2 1&param2[param2_2]=2 2
     *
     */

Tweet

Pocket