jQueryでフォームの内容をJSONで投げ、受け取ったJSONをフォームに戻す方法
今回RESTのサービスを使っていて、そのインターフェースはJSONになっている。リクエストもレスポンスも。サーバ側(Java)では、JSONICというJSONライブラリを使っていて、JSON形式の文字列をJavaのオブジェクトに変換したりまた、その逆を行ったりしている。
そこで、フォームの内容をがつっとJSONに変換して送信したり、また、JSONで取得したデータをがつっとフォームに戻したいなーと思って色々探してみた。
そのときのメモ。
フォームの内容をJSON形式の文字列にする方法。
まず、フォームの内容をJavaScriptのハッシュにする。その時formの内容を取得するserializeArrayというメソッドが用意されているのでこれを使う。
// フォームを取得 var form = $('form-id'); var param = {}; // フォームの内容を取得 // serializeArrayの戻り値は[{key: 'キーの名前', value: '値'}]という形式になっている $(form.serializeArray()).each(function(i, v) { param[v.name] = v.value; });
ここまでで、フォームの内容がハッシュに変換された。このハッシュをJSON形式の文字列にするにはjquery-jsonプラグインを使う。
GitHub - Krinkle/jquery-json: [Discontinued] Use native JSON.stringify and JSON.parse instead, or json2.js from https://github.com/douglascrockford/JSON-js
使い方はこんな感じ。
var json = $.toJSON(param);
これで、ハッシュからJSON形式の文字列に変換された。あとは、この文字列をサーバ側に送信すればよい。
JSON形式の文字列をフォームに適用する
次に、サーバからのレスポンス(ここでは、JSON形式の文字列が戻ってくると想定)をフォームに適用する場合を考える。
まず、JSON形式で受け取った文字列を先ほどとは逆にハッシュに変換する。これも、jquery-jsonプラグインが使える。
var response = $.evalJSON(responseText);
次にこのハッシュをフォームに適用するんだけど、ここでは、deserialize.jsというプラグインを使う。
http://www.reach1to1.com/sandbox/jquery/testform.html
$('form-id').deserialize(response);
とすることで、簡単にハッシュの内容をフォームに適用してくれる。がつっと。きもちいい。