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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

8167閲覧

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

Zaganchan

総合スコア80

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/04/08 01:43

###前提・実現したいこと
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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2016/04/08 01:48

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zaganchan

2016/04/08 01:59

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

2016/04/08 02:10

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

2016/04/14 23:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問