編集履歴

質問編集履歴

変更1

2019/09/18 04:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -48,33 +48,43 @@
 </div>
-<div class="resultList">
 <table>
-<tr>
+    <thead>
-<th>出版社</th>
+        <tr><th>出版社</th><th>在庫</th></tr>
-<td><input type="text" id="cpn" name="cpn"></td>
+    </thead>
-<th>在庫</th>
+    <tbody class="resultList">
-<td><input type="text" id="bNum" name="bNum"></td>
+    </tbody>
+   <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>')
+    });
+};
+//]]>
-</tr>
+</script>
 </table>
-</div>
-<script>
-document.getElementById("resultList").innerHTML =
-obj.books[1].cpn + " " + obj.books[1].bNum;
-</script>
 </form>
@@ -86,21 +96,7 @@
-```JSON
-var books = [
-{"cpn":"campany", "bNum":"hoge"}
-];
-```
+```js
-```ajax
 $(function(){
@@ -130,23 +126,13 @@
         .done( (data) => {
-            $('result').html(data);
+        	$.each(data, function (index, book) {
-            console.log(data);
+        		$('.resultList').append('<tr><td>' + book.cpn + '</td><td>' + book.bNum + '</td></tr>')
+        		});
-           //jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
-            $('resultList').html("resultList",json);
-            var bookss = JSON.parse(books);
-            console.log(JSON.stringify(bookss));
-        })
         // ajaxリクエストが失敗した時発動
@@ -170,28 +156,30 @@
 });
 ```
-Jasonファイルに書いたjasonの値をajaxで受けてhtmlに表示させるために、
-jsonのbooksのファイルを
+```json
-            $('resultList').html("resultList",json);
+var books = [
-            var bookss = JSON.parse(books);
+{"cpn":"campany", "bNum":"hoge"}
-            console.log(JSON.stringify(bookss));
+];
+```
-のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
+コードは上記のように変更いたしましたが、検索ボタンを押してからの表示ができませんでした。
-最終的にはJSON.stringifyする形式で表示させたいです
+fidderから確認してみましたが、送受信の確認もできませんでした。
-訂正がたくさんあり、申し訳ありませんが教えていただきたいです。
+ご教示いただきましたコードを書いたのですが、何がいけないのか教えていただきたいです。

１

2019/09/18 04:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -190,4 +190,8 @@
 のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
+最終的にはJSON.stringifyする形式で表示させたいです
 訂正がたくさんあり、申し訳ありませんが教えていただきたいです。

変更しました

2019/09/13 06:25

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -68,11 +68,33 @@
 </div>
+<script>
+document.getElementById("resultList").innerHTML =
+obj.books[1].cpn + " " + obj.books[1].bNum;
+</script>
 </form>
 </body>
 </html>
+```
+```JSON
+var books = [
+{"cpn":"campany", "bNum":"hoge"}
+];
 ```
@@ -91,6 +113,8 @@
             url:'/books',
             type:'GET',
+            dataType: 'json',
             data:{
@@ -112,11 +136,13 @@
-            var json = getjson();   　　　　　　　　//jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
+           //jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
             $('resultList').html("resultList",json);
+            var bookss = JSON.parse(books);
-            console.log(json);
+            console.log(JSON.stringify(bookss));
@@ -144,80 +170,24 @@
 });
 ```
+Jasonファイルに書いたjasonの値をajaxで受けてhtmlに表示させるために、
-```json
-package com.example.demo;
+jsonのbooksのファイルを
-import com.fasterxml.jackson.core.JsonProcessingException;
+            $('resultList').html("resultList",json);
+            var bookss = JSON.parse(books);
-import com.fasterxml.jackson.databind.ObjectMapper;
+            console.log(JSON.stringify(bookss));
-public class Main {
+のparseで指定して、htmlのgetElementById("resultList")で表示する<div　class="resultList"></div>の位置をしていしましたが値取得はできませんでした。
-    public static void main(String[] args) throws JsonProcessingException {
-        Hoge hoge = new Hoge();
-        hoge.cpn = "campany";
-        hoge.bNum = "111";
-        ObjectMapper mapper = new ObjectMapper();
-        String json = mapper.writeValueAsString(hoge);
-        System.out.println(json);
-    }
-}
-```
-```JSON
-<books>
-<books>
-    <cpn>campany</cpn>
-</books>
-<books>
-    <bNum>hoge</bNum>
-</books>
-</books>
-```
-jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
-jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが
-、どうしたら実行できるようになるか教えていただきたいです。
+訂正がたくさんあり、申し訳ありませんが教えていただきたいです。

html jsの変更

2019/09/13 06:22

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -194,6 +194,28 @@
+```JSON
+<books>
+<books>
+    <cpn>campany</cpn>
+</books>
+<books>
+    <bNum>hoge</bNum>
+</books>
+</books>
+```
 jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
 jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが

修正

2019/09/13 05:11

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,6 +10,8 @@
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+<script th:src="@{/js/test_json.js}" id="selectNum"></script>
 <script th:src="@{/js/books.js}" id="selectNum"></script>
 </head>
@@ -46,7 +48,7 @@
 </div>
-<div>
+<div class="resultList">
 <table>
@@ -108,6 +110,16 @@
             console.log(data);
+            var json = getjson();   　　　　　　　　//jsonから受けた値を表示したい<div　class="resultList"></div>へ表示
+            $('resultList').html("resultList",json);
+            console.log(json);
         })
         // ajaxリクエストが失敗した時発動
@@ -132,22 +144,58 @@
 });
 ```
-```controller
+```json
+package com.example.demo;
-@RequestMapping(value = "/books/search", method = RequestMethod.GET)
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
-	@ResponseBody
+public class Main {
-	public String search6(@RequestParam Map<String, String> params) {
+    public static void main(String[] args) throws JsonProcessingException {
+        Hoge hoge = new Hoge();
+        hoge.cpn = "campany";
+        hoge.bNum = "111";
+        ObjectMapper mapper = new ObjectMapper();
+        String json = mapper.writeValueAsString(hoge);
+        System.out.println(json);
+    }
+}
 ```
-インプットタグから入力された条件項目の<th>名前</th><th>題名</th>の値を受け、その条件に一致するデータを<th>出版社</th><th>在庫</th>に表示させたいです。
-サーバーがｄｂで取得したものを<list>にして値を返されたものを受け取り、表示する処理を書きたいです。
-その時に.doneに書く処理がいろいろ探してみましたが、わかりませんでしたので教えて頂きたいです。m(__)m
+jsonからの値を受けて、ajaxで表示するコードを書いてみましたが、実行できませんでした。
+jsonクラスの内容をajaxで受けてその値を<div class="resultList"></div>に表示したいのですが
+、どうしたら実行できるようになるか教えていただきたいです。

変更

2019/09/13 04:25

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -134,6 +134,16 @@
 ```
+```controller
+@RequestMapping(value = "/books/search", method = RequestMethod.GET)
+	@ResponseBody
+	public String search6(@RequestParam Map<String, String> params) {
+```
 インプットタグから入力された条件項目の<th>名前</th><th>題名</th>の値を受け、その条件に一致するデータを<th>出版社</th><th>在庫</th>に表示させたいです。