質問するログイン新規登録

質問編集履歴

5

html jsの変更

2019/09/12 06:50

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -44,6 +44,39 @@
44
44
  });
45
45
  ```
46
46
 
47
+ ```controller
48
+ package com.example.demo;
49
+ import java.util.Map;
50
+
51
+ import org.springframework.stereotype.Controller;
52
+ import org.springframework.ui.Model;
53
+ import org.springframework.web.bind.annotation.RequestMapping;
54
+ import org.springframework.web.bind.annotation.RequestMethod;
55
+ import org.springframework.web.bind.annotation.RequestParam;
56
+ import org.springframework.web.bind.annotation.ResponseBody;
57
+
58
+ @Controller
59
+ public class books {
60
+
61
+ @RequestMapping(value = "books", method = RequestMethod.GET)
62
+
63
+ public String booksList(Model model) {
64
+
65
+ return "books.html";
66
+
67
+ }
68
+
69
+ @RequestMapping(value = "/books/search", method = RequestMethod.GET)
70
+ @ResponseBody
71
+ public String search6(@RequestParam Map<String, String> params) {
72
+
73
+ return ;
74
+
75
+ }
76
+
77
+ }
78
+ ```
79
+
47
80
  1,<table class="result"></table> を付け加えました。
48
81
 
49
82
  問題 検索ボタンを押すとtableが二重に重なって表示されてしまいます。

4

変更1

2019/09/12 06:50

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  ```html
2
2
  <form>
3
+ <table class="result">
3
4
  <tr>
4
5
  <th>名前</th>
5
6
  <td><input type="text" id="name"></td>
@@ -9,7 +10,7 @@
9
10
  <div>
10
11
  <input type="button" name="ajax" id="ajax" value="検索">
11
12
  <script th:src="@{/js/books.js}" id="selectNum"></script>
12
- </div>
13
+ </table>
13
14
  </form>
14
15
  ```
15
16
 
@@ -43,15 +44,10 @@
43
44
  });
44
45
  ```
45
46
 
46
- 【概要】
47
- 本の名前と題名から検索できる仕様です
47
+ 1,<table class="result"></table> を付け加えました
48
48
 
49
+ 問題 検索ボタンを押すとtableが二重に重なって表示されてしまいます。
50
+ tableが二つできてしまいます。これは何が原因なのかがわからなく困っております。。
51
+
52
+ 実現したいこと
49
- input入力欄のname と sub_nameの値をajax受け取る
53
+ 画面上のinput入力された値をその同じinput上に非同期処理させたいす。
50
-
51
- ajaxで非同期処理されて画面に入力された値が再表示される
52
-
53
- 再表示された値をコントローラに送る
54
-
55
- コントローラからの値を受け取りjsで画面上表示させる。
56
-
57
- input入力欄のname と sub_nameの情報を受け取ったものを検索結果として表示させる

3

修正

2019/09/12 06:41

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -44,6 +44,8 @@
44
44
  ```
45
45
 
46
46
  【概要】
47
+ 本の名前と題名から検索できる仕様です。
48
+
47
49
  input入力欄のname と sub_nameの値をajaxで受け取る
48
50
 
49
51
  ajaxで非同期処理されて画面に入力された値が再表示される

2

修正

2019/09/12 06:12

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -43,4 +43,13 @@
43
43
  });
44
44
  ```
45
45
 
46
+ 【概要】
47
+ input入力欄のname と sub_nameの値をajaxで受け取る
48
+
49
+ ajaxで非同期処理されて画面に入力された値が再表示される
50
+
51
+ 再表示された値をコントローラに送る
52
+
53
+ コントローラからの値を受け取りjsで画面上表示させる。
54
+
46
- 実行したころ、検索ボタンを押すとajaxにより画面が非同期処理により書き変わるではなく、また同じ<tr></tr>が画面上に追加して2重に表示されてしまいます。インプットタグに書かれた情報を検索ボタンを押して、ajax側で受取り、再表示しですが、どうして<tr></tr>の名前と題名が画面上に追加れてしまうのかわかりまん。教えて頂きたいです。
55
+ input入力欄のname  sub_nameの情報を受を検索結果として表示させ

1

修正

2019/09/12 06:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
  <td><input type="text"id="sub_name" ></td>
8
8
  </tr>
9
9
  <div>
10
- <input type="button" name="Ajax" id="Ajax" value="検索">
10
+ <input type="button" name="ajax" id="ajax" value="検索">
11
11
  <script th:src="@{/js/books.js}" id="selectNum"></script>
12
12
  </div>
13
13
  </form>