質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

JSを使ったAjax通信でJSONを送受信したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,756

Zaganchan

score 80

前提・実現したいこと

Springでウェブシステムを作っています。
JSPでなく、HTMLをそのまま表示するようにしているので、少し動きが異なるかもしれません。

サーバーへHTML上のINPUTフィールドに入力されたデータを条件として投げ、サーバー上でデータリストを生成し、HTMLにそのリストを展開するという流れを非同期通信で行いたいと考えています。

そもそもこの挙動は実現できるのでしょうか・・・

発生している問題・エラーメッセージ

サーバーから帰ってくるJSONデータが常に空です。
処理が内部に入り、データを受け渡し、return出来ていることは確認しているのですが、返還されたjson_dataは(object Object)となっており、データが見られません。

該当のソースコード

JS

$(function(){
    $("#ajax_btn").click(function() {
        // 多重送信を防ぐため通信完了までボタンをdisableにする
        var button = $(this);
        button.attr("disabled", true);

        // 各フィールドから値を取得してJSONデータを作成
        var data = {
            name: $("#name").val(),
            age: parseInt($("#age").val())
        };
        $.ajax({
            type:"POST",             
            url:"TEST.html",       
            data:JSON.stringify(data),  
            contentType: 'application/json', 
            dataType: "json",           
            success: function(json_data) {   
                success(data);
            },
            error: function() {        
                alert("XMLHttpRequest : " + XMLHttpRequest.status);
            },
            complete: function() {      
                button.attr("disabled", false);  // ボタンを再び enableにする
            }
        });
    });
});

//Ajax通信成功時処理
function success(data) {
    alert("success:" + data);

    $("#output_data").text("");
    for (var cnt = 0; cnt < data.length; cnt++) {
        $("#output_data").append("data[" + cnt + "]:" + data[cnt] + ";");
    }
}


Spring

@RequestMapping(value = ”/TEST”, method = RequestMethod.POST, headers = {"Content-type=application/json,application/xml"},consumes = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public String getJSON(@RequestBody String inputdata ,HttpServletRequest request, HttpServletResponse response){
        Gson gson = new Gson();
        String ret = gson.toJson(inputdata);
        return ret;
    }


maven

<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.7.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.7.3</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.6.2</version>
        </dependency>


HTML

<input type="text" class="form-control" id="name"  value="" />
<input type="text" class="form-control" id="age"  value="" />
    <input type="button" id="ajax_btn" value="Ajax通信テスト" /><br />
    outputData:<span id="output_data"></span>
</div>

補足情報(言語/FW/ツール等のバージョンなど)

JDK1.8_72
Java8
Spring4.2
Jquery2.1.1
ajax-1.11.1-jquery

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

alert() ではなく console.log() を使って、デベロッパーツールのコンソールで確認されはいかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/08 10:59

    ご回答ありがとうございます!
    ご指摘のとおり、console.logを使用したところ
    正常にデータが入っておりました。
    ということはただ単純にJqueryでパースができてなかっただけだったんですね・・・

    もしまた詰まったら別途質問させて頂きます。

    キャンセル

  • 2016/04/08 11:10

    > Jqueryでパースができてなかった
    いえ、違います。
    パースができていなかった場合、テキストとして返るので、alert("success:" + data); が問題なく実行されるはずです。(object Object)が返ってくると言うことは、JSONにパースされ、{hog:'something'} のような形で格納されています。

    【jQuery.getJSON() | jQuery API Documentation】
    http://api.jquery.com/jquery.getjson/

    キャンセル

  • 2016/04/15 08:24

    しっかりと理解できていなくてすみません。
    参考URLありがとうございます。勉強させて頂きます。
    この後、一応動かせるようになりました。ありがとうございました。
    (かえってくる日本語が全部文字化けしてしまう問題が残ってはいるのですが・・・)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる