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

とすることで、簡単にハッシュの内容をフォームに適用してくれる。がつっと。きもちいい。