Q&A
どのような形でdata返してるんでしょうか
html
1<!doctype html> 2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 3<head lang="jp"> 4<meta charset="utf-8"> 5<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 6<script th:src="@{/js/test_json.js}" id="selectNum"></script> 7<script th:src="@{/js/books.js}" id="selectNum"></script> 8</head> 9</head> 10<body> 11<form> 12<div class="result"> 13<table > 14<tr> 15<th>名前</th> 16<td><input type="text" id="name" name=""></td> 17<th>題名</th> 18<td><input type="text"id="sub_name" name="sub_name" ></td> 19</tr> 20<div> 21<input type="button" name="ajax" id="ajax" value="検索"> 22</div> 23</table> 24</div> 25<table> 26 <thead> 27 <tr><th>出版社</th><th>在庫</th></tr> 28 </thead> 29 <tbody class="resultList"> 30 </tbody> 31 <script type="text/javascript"> 32//<![CDATA[ 33 window.onload = function () { 34 var books = '[{ "cpn": "campany1", "bNum": "hoge1" }, { "cpn": "campany2", "bNum": "hoge2" }]'; 35 36 var bookss = JSON.parse(books); 37 $.each(bookss, function (index, book) { 38 $('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>') 39 }); 40}; 41//]]> 42</script> 43</table> 44</form> 45</body> 46</html>
js
1$(function(){ 2 // ajax button click 3 $('#ajax').on('click',function(){ 4 $.ajax({ 5 url:'/books', 6 type:'GET', 7 dataType: 'json', 8 data:{ 9 'name':$('#name').val(), 10 'sub_name':$('#sub_name').val() 11 } 12 }) 13 // ajaxリクエストが成功した時発動 14 .done( (data) => { 15 $.each(data, function (index, book) { 16 $('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>') 17 }); 18 19 // ajaxリクエストが失敗した時発動 20 .fail( (data) => { 21 $('result').html(data); 22 console.log(data); 23 }) 24 // ajaxリクエストが成功・失敗どちらでも発動 25 .always( (data) => { 26 27 }); 28 }); 29}); 30
json
1 2var books = [ 3{"cpn":"campany", "bNum":"hoge"} 4];
コードは上記のように変更いたしましたが、検索ボタンを押してからの表示ができませんでした。
fidderから確認してみましたが、送受信の確認もできませんでした。
ご教示いただきましたコードを書いたのですが、何がいけないのか教えていただきたいです。
Map<String, String> params
Mapにつめて返したいです。
コントローラーはまだ作成してませんが、Mapでいくつもりです。
Map って何ですか？ JSON ではないのですか？
Ajaxでサーバーサイドから返せるのは文字列です。MapそのままではなくJSONにするなど工夫は必要です。
ひとまず固定値でもいいのでモック作って返すくらいは作っておきましょう ＜コントローラ
Map というのをググって調べてみると java のオブジェクトのようですね。java は全く知らない自分が言うことですのでハズレかもしれんせんが、HTTP 通信で Map オブジェクトそのものが返せるとは思えません。JSON などにシリアライズしないとダメなのでは？
すいません、MapとJSONの使い方が理解できていないくMapと言ってしまいました。コントローラーではMapでもってきている例をいくつかみまして、Mapでできるのかなと思っておりました。
そうなのですね！知りませんでした！有難うございます。jsonでコントトーラーのモックを作成してみますm(__)m
その Map オブジェクトを JSON にシリアライズするライブラリはないのですか？ フレームワークによってはそういうライブラリが用意されていると思うのですが。（ちなみに、.NET Framework にはあります。java にもあるのでは？）
検索してみましたが、ありました！！まだ理解ができていないのですが、そのようなものがあることも知りませんでしたので勉強になりました！ありがとうございます。
> jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、
どこに書いてあるのですか？
何はともあれサーバーから送信されてくる JSON 文字列を書いてもらえませんか。それが分かれば java とか全く知らなくても JavaScript / jQuery を知っている人なら答えが書けると思いますよ。
Hoge hoge = new Hoge();
hoge.cpn = "campany";
hoge.bNum = "111";
すいません、上記の部分でjsonを書けたと思ってました、、
コードブロックのタイトルが「JSON」になっている箇所が2箇所ありますが、どちらもJSONフォーマットではないため、修正してください。
JSON 文字列とは何か、ごくごく基本的なところだけで良いので勉強してください。基本的な知識もないのではここのような掲示板では話が通じなくて解決するのは難しいですよ。
質問を何度も書き換えてますが、質問と回答のつじつまが合わなくなってきています。
例えば、yambejp さんの回答にある getjson() はすでに質問から消えてしまって話が分からなくなってしまっていますし、私の回答も、質問を書き換えたことによって話の辻褄が合わなくなりつつあります。
ここ Teratail は質問者さん専用の Q&A サイトではなく、情報を蓄積して後で検索などでここを訪れた人にも役に立つようにするのが目的のようです。なので、ここを初めて訪れる人が上から読んでいって話の辻褄が合わなくなるような質問の書き換えは避けていただくようお願いします。
あと、私に聞きたいことがあるなら、私の回答のコメント欄に質問を書いてください。質問欄に書かれても、私に何を聞きたいのか分かりません。
申し訳ありませんでした。。
了解しました。以後気をつけます。
有難うございます。jsとjsonとの連携が取れず困っております。原因がわからないので教えて頂きたいです
上にも書きましたが、私への質問はここに書くのではなく、私の回答のコメント欄に書いてください。その際、何に困ってるか、何が分かれば解決しそうか、もう少し詳しい情報を書いてください。
回答2件
0
javaからの戻り値がjson形式になっているなら
$.ajaxではdataTypeに"json"を指定します。
jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>
jsonデータは配列やオブジェクトで返ってくることが多いので
適切にデータにアクセスして展開してresultListに書き込んでください
getjson();
なにかユーザー関数を利用するならその内容を書いてください
指摘
- jsonが返ってくるなら具体的なjsonデータを明記すべきです
同じことをずっと指摘されているのになぜそうしないのでしょうか？
- jsonデータをhtmlに表示するためには変換が必要です
JSON.stringifyするだけでいいのか、jsonデータの中から適当な値を抽出して表記したいのか
質問からは希望している最終形が想像できません
投稿2019/09/13 05:08
総合スコア116688
0
今時間が無いのでコードと結果だけ書いておきます。説明は後で。
JavaScript / jQuery
<script type="text/javascript"> //<![CDATA[ window.onload = function () { var books = '[{ "cpn": "campany1", "bNum": "hoge1" }, { "cpn": "campany2", "bNum": "hoge2" }]'; var bookss = JSON.parse(books); $.each(bookss, function (index, book) { $('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>') }); }; //]]> </script>
html
<table> <thead> <tr><th>出版社</th><th>在庫</th></tr> </thead> <tbody class="resultList"> </tbody> </table>
結果
投稿2019/09/13 07:12
編集2019/09/13 07:40退会済みユーザー
総合スコア0
お忙しいのに、本当に有難うございます。コードをじっくり調べながら読んでみます。有難うございます！！
不明点、疑問点があれば聞いてください。放置・放棄はなしでお願いします。
有難うございます。
実行でき、表示されたのですが、ajaxとの連携ができませんでした。検索ボタンを押さずにデータが最初から表示されてしまいます。
ajaxに data : JSON.stringify(books)を追加したりしてみたのですが、最初から表示されたままの状態から這い上がれません。dataにどのように書くと連携がとれるのか教えて頂きたいですm(__)m
> 検索ボタンを押さずにデータが最初から表示されてしまいます。
どういうコードを書いたのでしょう？
質問者さんの ajax のコードで言うと、その .done(data => { ... }) の data に、サーバーから送られれ来た JSON 文字列をパースした JavaScript オブジェクト（私の JavaScript / jQuery のコードで言うと JSON.parse(books) に該当）が代入されるはずです。
なので、.done(data => { ... }) の ... の部分を、私の JavaScript / jQuery のコードを参考に以下のようにすれば良いはずです。
$.each(data, function (index, book) {
$('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>')
});
もちろん、質問者さんのコードで HTML の <div class="resultList"> ... </div> の部分を私の回答の html のコードに置き換えないと期待した結果にはなりませんが。
その前に、サーバーに送信するデータとサーバーから受信する JSON 文字列が期待通りになっているか、Fiddler などのキャプチャツールを使って調べるのが先のような気がします。
GET でデータをクエリ文字列として送信しているように見えますが、そもそもそのあたりがかなり怪しそうです。以下の記事を参考にして考えてみることをお勧めします。
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx
了解いたしました。
doneに上記で指示いただきましたように追加しましたが、検索ボタンを押した後のdoneではなく、初めから<tr><td>に表示されている状態で表示されてしまっております。検索を押したときに、jsonの値が<tr><td>に反映されるようにしたいのですが、自分としては教えて頂いたとおりにコードを書いてますが、何が原因なのかもわからない状態です。
なので、何が原因と思われるのか教えていただきたいです。
> 初めから<tr><td>に表示されている状態で表示されてしまっております。
私が回答に書いたサンプルコードは、Web サーバーは関係なく、質問者さんが質問に提示した JSON 文字列を table に表示するにはどうするかという例を示したもので、コードにある通り window.onload で動くので「初めから」となります。それはそうなるように意図したものです。
表示されることが確認できた後に質問者さんがやるべきことは、window.onload 以下のコードは削除して、上の 2019/09/18 10:23 の私のコメントに書いたように、JavaScript のコードの .done(data => { ... }) の ... の部分に私の JavaScript / jQuery のコードを移植して試してみることです。
それは質問欄の JavaScript のコードを見ると実施済みだが、
> 検索ボタンを押した後
何も変化がないのが現状なのですよね？
とすると、ボタンクリックで JavaScript のコードの $('#ajax').on('click',function(){ ... }); の function が起動して JSON 文字列がサーバーから返ってくると期待していると思いますが、そこが期待通りに動いてないということだと思います。
先のコメントで書きましたが、Fiddler で調べましたか？ その結果はどうなってますか？
今気が付いたのですが、質問のコメント欄の 2019/09/13 11:05 の質問者さんのコメントに、
> コントローラーはまだ作成してませんが、Mapでいくつもりです。
とありました。ひょっとしてサーバー側はまだその状態から進捗はないのですか？ であれば、ボタンクリックで何も変化がないのは当たり前ですよ。
m.ts10806 さんが 2019/09/13 11:18 の質問のコメントに書かれているように、固定値でいいので有効な JSON 文字列を返すモックを作って試しましょう。
$(function(){
$('#ajax').on('click',function(){
console.log("Jsよばれた");
$.ajax({
url:'/nf/home',
type:'GET',
data:{
'fiscalYear':$('#fiscalYear').val(),
'yearMonth':$('#yearMonth').val(),
'competitionName':$('#competitionName').val(),
'kitSendPrefecture':$('#kitSendPrefecture').val(),
'venueName':$('#venueName').val(),
'subAssociationName':$('#subAssociationName').val()
}
})
.done( (data) => {
console.log("成功");
console.log("formList:" + data);
$('result').html(data);
/*console.log(data);*/
$('.result').append('<tr><td>' + fiscalYear + '</td><td>' + yearMonth + '</td><td>' + competitionName + '</td><td>' + kitSendPrefecture + '</td><td>' + venueName + '</td><td>' + subAssociationName + '</td></tr>')
})
.fail( (data) => {
console.log("HTTPstatus : "+jqXHR.status);
});
});
});
List<String> formList = Arrays.asList("dummy", "dummy", "dummy", "dummy","dummy","dummy");
質問からずっとコントローラー側をさくせいしておりましたが、結局jsonが分からず、上記にへんこうしたのですが、ブラウザ上にdummyが表示されないのですが、どうしたらいいか教えて頂きたいです。
コンソールにconsole.log("Jsよばれた"); と console.log("成功");の文字は確認できました。
やってることがメチャクチャです。
新たに別にスレッドを立てて、モック＆サンプルで良いのであなたが望むデータを JSON 文字列として送信するにはサーバー側をどう実装すべきかを質問して、サーバー側を完成させてから、ここに戻ってきてその JSON 文字列を書いてから Q&A を再開した方がよさそうです。
あなたの回答
tips
プレビュー
