###前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/08 01:59
2016/04/08 02:10
2016/04/14 23:24