JavaとJS(jQuery)とAjax。JSONの特定の値を取得。

JavaからJSON型で返したデータの特定の値をjQuery(クライアント側)で取得する。

JSONを扱う処理の備忘録
Struts1.3.10を使用。

JSでAjax。Javaを呼ぶ。

main.js

$.ajax({
    url     : "./SearchBook.do",
    type    : "POST",
    async   : true,
    data    : "ここにJavaへ投げるデータ",
    dataType: "json",
    success : function(result) {
        //成功時の処理
    }
});

JSから受け取ったデータでいろいろ処理をした結果を、Java側でJSON型に入れる。
データとしてString型とint型を用意。

main.java

String title = "火花"
int totalPage = 152;

JSONObject result = new JSONObject();
result.put("タイトル", title);
result.put("ページ数", totalPage);

下のようなJSON型が返ってくる。
{"タイトル":"火花","ページ数":"152"}

$.ajax({
    --省略--
    success : function(result) {
        //成功時の処理
    }
});

あとはキーで対象の値を取り出すだけ。

main.js

success : function(result) {
    //成功時の処理
    $("#foo").text(result["タイトル"]);
    $("#bar").text(result["ページ数"]);
}

とりあえずこれでできました。
もっといい方法があれば是非ご教授願います。

違う書き方もある...

Javaのところでキーを英字に変える。

main.java

String title = "火花"
int totalPage = 152;

JSONObject result = new JSONObject();
result.put("bookTitle", title);
result.put("totalPage", totalPage);

JS側は.(ドット)で繋いでキーを指定して値を取得する。

main.js

$.ajax({
    url     : "./SearchBook.do",
    type    : "POST",
    async   : true,
    data    : "ここにJavaへ投げるデータ",
    dataType: "json",
    success : function(result) {
        //成功時の処理
        $("#foo").text(result.bookTitle);
        $("#bar").text(result.pager.totalPage);
}

parseするのかしないのか

※ajaxのdataTypeでdataType: "json"とJSON型で指定してやれば、parseする必要ありませんでした。
　逆に言うとparseするとエラーになります。

要するに...

main.js

$.ajax({
    url     : "./SearchBook.do",
    type    : "POST",
    async   : true,
    data    : "ここにJavaへ投げるデータ",
    dataType: "json",
    success : function(result) {
        //成功時の処理
        $("#foo").text(result["タイトル"]);
        $("#bar").text(result["ページ数"]);
    }
});

または

main.js

$.ajax({
    url     : "./SearchBook.do",
    type    : "POST",
    async   : true,
    data    : "ここにJavaへ投げるデータ",
    success : function(result) {
        //成功時の処理
        var data = JSON.parse(result);
        $("#foo").text(result["タイトル"]);
        $("#bar").text(result["ページ数"]);
    }
});

とすること。