teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ajaxの画面表示について

編集履歴

質問編集履歴

6

変更1

2019/09/18 04:24

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -23,33 +23,31 @@
23
23
  </div>
24
24
  </table>
25
25
  </div>
26
- <div class="resultList">
27
26
  <table>
28
- <tr>
27
+ <thead>
29
- <th>出版社</th>
30
- <td><input type="text" id="cpn" name="cpn"></td>
28
+ <tr><th>出版社</th><th>在庫</th></tr>
31
- <th>在庫</th>
32
- <td><input type="text" id="bNum" name="bNum"></td>
33
- </tr>
29
+ </thead>
30
+ <tbody class="resultList">
31
+ </tbody>
32
+ <script type="text/javascript">
33
+ //<![CDATA[
34
+ window.onload = function () {
35
+ var books = '[{ "cpn": "campany1", "bNum": "hoge1" }, { "cpn": "campany2", "bNum": "hoge2" }]';
36
+
37
+ var bookss = JSON.parse(books);
38
+ $.each(bookss, function (index, book) {
39
+ $('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>')
40
+ });
41
+ };
42
+ //]]>
43
+ </script>
34
44
  </table>
35
- </div>
36
- <script>
37
- document.getElementById("resultList").innerHTML =
38
- obj.books[1].cpn + " " + obj.books[1].bNum;
39
- </script>
40
45
  </form>
41
46
  </body>
42
47
  </html>
43
48
  ```
44
49
 
45
- ```JSON
46
- var books = [
47
- {"cpn":"campany", "bNum":"hoge"}
48
- ];
49
-
50
- ```
50
+ ```js
51
-
52
- ```ajax
53
51
  $(function(){
54
52
  // ajax button click
55
53
  $('#ajax').on('click',function(){
@@ -64,15 +62,10 @@
64
62
  })
65
63
  // ajaxリクエストが成功した時発動
66
64
  .done( (data) => {
67
- $('result').html(data);
68
- console.log(data);
69
-
70
- //jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
71
- $('resultList').html("resultList",json);
72
- var bookss = JSON.parse(books);
73
- console.log(JSON.stringify(bookss));
65
+ $.each(data, function (index, book) {
74
-
66
+ $('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>')
75
- })
67
+ });
68
+
76
69
  // ajaxリクエストが失敗した時発動
77
70
  .fail( (data) => {
78
71
  $('result').html(data);
@@ -84,16 +77,17 @@
84
77
  });
85
78
  });
86
79
  });
80
+
87
81
  ```
88
82
 
89
- Jasonファイルに書いたjasonの値をajaxで受けてhtmlに表示させるために、
90
- jsonのbooksのファイルを
83
+ ```json
91
84
 
85
+ var books = [
92
- $('resultList').html("resultList",json);
86
+ {"cpn":"campany", "bNum":"hoge"}
93
- var bookss = JSON.parse(books);
87
+ ];
94
- console.log(JSON.stringify(bookss));
88
+ ```
95
89
 
96
- のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
90
+ コードは上記のように変更いたしましたが、検索ボタンを押してからの表示ができませんでした。
97
- 最終的にはJSON.stringifyする形式で表示させたいです
91
+ fidderから確認してみましたが、送受信の確認もできませんでした。
98
92
 
99
- 訂正がたくさんあり、申し訳ありませんが教えていただきたいです。
93
+ ご教示いただきましたコードを書いたのですが、何がいけないのか教えていただきたいです。

5

１

2019/09/18 04:24

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -94,4 +94,6 @@
94
94
  console.log(JSON.stringify(bookss));
95
95
 
96
96
  のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
97
+ 最終的にはJSON.stringifyする形式で表示させたいです
98
+
97
99
  訂正がたくさんあり、申し訳ありませんが教えていただきたいです。

4

変更しました

2019/09/13 06:25

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -33,11 +33,22 @@
33
33
  </tr>
34
34
  </table>
35
35
  </div>
36
+ <script>
37
+ document.getElementById("resultList").innerHTML =
38
+ obj.books[1].cpn + " " + obj.books[1].bNum;
39
+ </script>
36
40
  </form>
37
41
  </body>
38
42
  </html>
39
43
  ```
40
44
 
45
+ ```JSON
46
+ var books = [
47
+ {"cpn":"campany", "bNum":"hoge"}
48
+ ];
49
+
50
+ ```
51
+
41
52
  ```ajax
42
53
  $(function(){
43
54
  // ajax button click
@@ -45,6 +56,7 @@
45
56
  $.ajax({
46
57
  url:'/books',
47
58
  type:'GET',
59
+ dataType: 'json',
48
60
  data:{
49
61
  'name':$('#name').val(),
50
62
  'sub_name':$('#sub_name').val()
@@ -55,9 +67,10 @@
55
67
  $('result').html(data);
56
68
  console.log(data);
57
69
 
58
- var json = getjson(); 　　　　　　　　//jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
70
+ //jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
59
71
  $('resultList').html("resultList",json);
72
+ var bookss = JSON.parse(books);
60
- console.log(json);
73
+ console.log(JSON.stringify(bookss));
61
74
 
62
75
  })
63
76
  // ajaxリクエストが失敗した時発動
@@ -71,42 +84,14 @@
71
84
  });
72
85
  });
73
86
  });
74
-
75
87
  ```
76
88
 
89
+ Jasonファイルに書いたjasonの値をajaxで受けてhtmlに表示させるために、
90
+ jsonのbooksのファイルを
77
91
 
78
- ```json
92
+ $('resultList').html("resultList",json);
79
- package com.example.demo;
93
+ var bookss = JSON.parse(books);
94
+ console.log(JSON.stringify(bookss));
80
95
 
81
- import com.fasterxml.jackson.core.JsonProcessingException;
82
- import com.fasterxml.jackson.databind.ObjectMapper;
83
-
84
- public class Main {
85
-
86
- public static void main(String[] args) throws JsonProcessingException {
87
- Hoge hoge = new Hoge();
88
- hoge.cpn = "campany";
89
- hoge.bNum = "111";
90
-
91
- ObjectMapper mapper = new ObjectMapper();
92
- String json = mapper.writeValueAsString(hoge);
93
-
94
- System.out.println(json);
95
- }
96
- }
97
- ```
98
-
99
- ```JSON
100
- <books>
101
- <books>
102
- <cpn>campany</cpn>
103
- </books>
104
- <books>
105
- <bNum>hoge</bNum>
106
- </books>
107
- </books>
108
- ```
109
-
110
- jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
111
- jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが
96
+ のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
112
- 、どうしたら実行できるようになるか教えていただきたいです。
97
+ 訂正がたくさんあり、申し訳ありませんが教えていただきたいです。

3

html jsの変更

2019/09/13 06:22

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -96,6 +96,17 @@
96
96
  }
97
97
  ```
98
98
 
99
+ ```JSON
100
+ <books>
101
+ <books>
102
+ <cpn>campany</cpn>
103
+ </books>
104
+ <books>
105
+ <bNum>hoge</bNum>
106
+ </books>
107
+ </books>
108
+ ```
109
+
99
110
  jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
100
111
  jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが
101
112
  、どうしたら実行できるようになるか教えていただきたいです。

2

修正

2019/09/13 05:11

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,7 @@
4
4
  <head lang="jp">
5
5
  <meta charset="utf-8">
6
6
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7
+ <script th:src="@{/js/test_json.js}" id="selectNum"></script>
7
8
  <script th:src="@{/js/books.js}" id="selectNum"></script>
8
9
  </head>
9
10
  </head>
@@ -22,7 +23,7 @@
22
23
  </div>
23
24
  </table>
24
25
  </div>
25
- <div>
26
+ <div class="resultList">
26
27
  <table>
27
28
  <tr>
28
29
  <th>出版社</th>
@@ -53,6 +54,11 @@
53
54
  .done( (data) => {
54
55
  $('result').html(data);
55
56
  console.log(data);
57
+
58
+ var json = getjson(); 　　　　　　　　//jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
59
+ $('resultList').html("resultList",json);
60
+ console.log(json);
61
+
56
62
  })
57
63
  // ajaxリクエストが失敗した時発動
58
64
  .fail( (data) => {
@@ -65,13 +71,31 @@
65
71
  });
66
72
  });
67
73
  });
74
+
68
75
  ```
76
+
77
+
69
- ```controller
78
+ ```json
79
+ package com.example.demo;
80
+
70
- @RequestMapping(value = "/books/search", method = RequestMethod.GET)
81
+ import com.fasterxml.jackson.core.JsonProcessingException;
82
+ import com.fasterxml.jackson.databind.ObjectMapper;
83
+
71
- @ResponseBody
84
+ public class Main {
85
+
72
- public String search6(@RequestParam Map<String, String> params) {
86
+ public static void main(String[] args) throws JsonProcessingException {
87
+ Hoge hoge = new Hoge();
88
+ hoge.cpn = "campany";
89
+ hoge.bNum = "111";
90
+
91
+ ObjectMapper mapper = new ObjectMapper();
92
+ String json = mapper.writeValueAsString(hoge);
93
+
94
+ System.out.println(json);
95
+ }
96
+ }
73
97
  ```
74
98
 
75
- インプットタグから入力された条件項目の<th>名前</th><th>題名</th>の値を受け、その条件に一致するデータを<th>出版社</th><th>在庫</th>に表示させたいです。
76
- サーバーがｄｂで取得したものを<list>にして値を返されたものを受け取り、表示する処理を書きたいです。
77
- その時に.doneに書く処理がいろいろ探してみましたが、わかりませんでしたので教えて頂きたいです。m(__)m
99
+ jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
100
+ jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが
101
+ 、どうしたら実行できるようになるか教えていただきたいです。

1

変更

2019/09/13 04:25

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -66,6 +66,11 @@
66
66
  });
67
67
  });
68
68
  ```
69
+ ```controller
70
+ @RequestMapping(value = "/books/search", method = RequestMethod.GET)
71
+ @ResponseBody
72
+ public String search6(@RequestParam Map<String, String> params) {
73
+ ```
69
74
 
70
75
  インプットタグから入力された条件項目の<th>名前</th><th>題名</th>の値を受け、その条件に一致するデータを<th>出版社</th><th>在庫</th>に表示させたいです。
71
76
  サーバーがｄｂで取得したものを<list>にして値を返されたものを受け取り、表示する処理を書きたいです。