ここでは、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¶mArray%5B%5D=array1¶mArray%5B%5D=100¶m2%5Bparam2_1%5D=2+1¶m2%5Bparam2_2%5D=2+2 * */
URL エンコードされていることはわかりますが、わかり辛いので URL デコードしてみます。jQuery ではデコード関数は用意されていないようですので、Javascript の decodeURIComponent 関数を使用します。
/* * まず、文字列のプラス(+)を手動で %20 に変換している点に注意する必要がある。 * decodeURIComponent関数ではプラスはプラスのままで変換されないので半角スペースにデコードされない。 */ var deStr = decodeURIComponent(getParamStr.replace(/\+/g, '%20')); console.log( deStr ); /* * 出力結果 * ---------------------------------------------- * param1=1¶mArray[]=array1¶mArray[]=100¶m2[param2_1]=2 1¶m2[param2_2]=2 2 * */