ありの日記

jQueryでフォームの内容をJSONで投げ、受け取ったJSONをフォームに戻す方法

jQuery | 19:59 |

今回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プラグインを使う。

jquery-json - JSON plugin for jQuery, provides simple ways to convert to JSON and back again. - Google Project Hosting

使い方はこんな感じ。

var json = $.toJSON(param);

これで、ハッシュからJSON形式の文字列に変換された。あとは、この文字列をサーバ側に送信すればよい。

JSON形式の文字列をフォームに適用する

次に、サーバからのレスポンス(ここでは、JSON形式の文字列が戻ってくると想定)をフォームに適用する場合を考える。

まず、JSON形式で受け取った文字列を先ほどとは逆にハッシュに変換する。これも、jquery-jsonプラグインが使える。

var response = $.evalJSON(responseText);

次にこのハッシュをフォームに適用するんだけど、ここでは、deserialize.jsというプラグインを使う。

Nothing found for Sandbox Jquery Testform

$('form-id').deserialize(response);

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