Javaで、検索入力の結果を非同期処理を行いたいです。

Javaを使用して掲示板を作っています。
掲示板投稿一覧のページで検索ボックスに文字を入力したら非同期で一覧ページの結果に反映させたいです。

show_all_contents.jsp
1<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
2
3<%@ page import="java.util.ArrayList" %>
4<%@ page import="java.util.List"      %>
5<%@ page import="model.ContentsDto"      %>
6
7<%--
8-------------------------------------------------------------------------------------------------
9ファイル名：show_all_contents.jsp
10-------------------------------------------------------------------------------------------------
11--%>
12
13<%
14	//データを全件抽出
15List<ContentsDto> list = (List<ContentsDto>)request.getAttribute("ALL_CONTENTS_LIST");
16%>
17
18<html>
19  <head>
20    <title>投稿一覧</title>
21  </head>
22  <body>
23    <h2>投稿一覧</h2>
24  	<form method="post" action="">
25        <input type="text" id="SEARCH_TEXT" name="SEARCH_TEXT" placeholder="検索ワードを入力">
26     </form>
27    <table class="surbey_list" border=1>
28      <tr bgcolor="#c0c0c0">
29        <th>名前</th>
30        <th>タイトル</th>
31        <th>メッセージ</th>
32        <th>投稿時間</th>
33      </tr>
34<%
35	for (int i = 0; i < list.size(); i++) {
36	ContentsDto dto = list.get(i);
37%>
38      <tr>
39        <td><%= replaceEscapeChar(dto.getName()) %></td>
40        <td><%= replaceEscapeChar(dto.getTitle()) %></td>
41        <td><%= replaceEscapeChar(dto.getMessage()) %></td>
42        <td><%= dto.getTime() %></td>
43      </tr>
44<%
45}
46%>
47    </table>
48    <br>
49    <a href="<%=request.getContextPath()%>/InputContents">新規投稿画面へ</a>
50    <br>
51  	<a href="ExecuteLogout">ログアウトする</a>
52  	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
53  	<script type="text/javascript" src="js/search_contents.js"></script>
54  </body>
55</html>
56
57<%!/**----------------------------------------------------------------------*
58 *replaceEscapeCharクラス
59 *----------------------------------------------------------------------**/
60String replaceEscapeChar(String inputText) {
61
62	String charAfterEscape = inputText ; //エスケープ後の文字列データ
63
64	// 「&」を変換
65	charAfterEscape = charAfterEscape.replace("&", "&amp;");
66	// 「<」を変換
67	charAfterEscape = charAfterEscape.replace("<", "&lt;");
68	// 「>」を変換
69	charAfterEscape = charAfterEscape.replace(">", "&gt;");
70	// 「"」を変換
71	charAfterEscape = charAfterEscape.replace("\"", "&quot;");
72	// 「'」を変換
73	charAfterEscape = charAfterEscape.replace("'", "&#039;");
74
75	return charAfterEscape;
76}%>

ShowAllContents.java
1package controller;
2
3import java.io.IOException;
4import java.util.ArrayList;
5import java.util.List;
6
7import javax.servlet.RequestDispatcher;
8import javax.servlet.ServletException;
9import javax.servlet.http.HttpServlet;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12import javax.servlet.http.HttpSession;
13
14import model.ContentsDto;
15import model.ShowAllContentsBL;
16import model.UserInfoDto;
17
18
19public class ShowAllContents extends HttpServlet {
20	private static final long serialVersionUID = 1L;
21
22	public ShowAllContents() {
23		super();
24	}
25
26	protected void doGet(HttpServletRequest request, HttpServletResponse response)
27			throws ServletException, IOException {
28
29		//レスポンス（出力データ）の文字コードを設定
30		response.setContentType("text/html;charset=UTF-8");
31
32		//セッションからユーザーデータを取得
33		HttpSession session           = request.getSession();
34		UserInfoDto userInfoOnSession = (UserInfoDto)session.getAttribute("LOGIN_INFO");
35
36		//ログイン状態によって表示画面を振り分ける
37		if (userInfoOnSession != null) {
38			//ログイン済：投稿一覧画面を出力
39
40			//「contents」テーブルのデータを全件抽出
41			List<ContentsDto> list  = new ArrayList<ContentsDto>();
42			ShowAllContentsBL logic = new ShowAllContentsBL();
43			list = logic.executeSelectContents();
44
45			//リストをリクエストスコープに保存
46			request.setAttribute( "ALL_CONTENTS_LIST" , list );
47
48			//Viewにフォワード（フォワード先：show_contents_by_satisfaction_level.jsp）
49			RequestDispatcher dispatch = request.getRequestDispatcher("/WEB-INF/view/show_all_contents.jsp");
50			dispatch.forward(request, response);
51
52		} else {
53			//未ログイン：ログイン画面へ転送
54			response.sendRedirect("Login");
55		}
56	}
57
58	protected void doPost(HttpServletRequest request, HttpServletResponse response)
59			throws ServletException, IOException {
60		doGet(request, response);
61	}
62
63}
64

ContentsDto.java
1package model;
2
3import java.sql.Timestamp;
4
5
6public class ContentsDto {
7
8
9	private String    name ;                //名前
10	private String    title ;                 //年齢
11	private String    message ;             //メッセージ
12	private Timestamp time ;                //更新時刻
13
14
15	//getter/setter（対象フィールド：name）
16	public String getName() { return name; }
17	public void setName(String name) { this.name = name; }
18
19	//getter/setter（対象フィールド：age）
20	public String getTitle() { return title; }
21	public void setTitle(String title) { this.title = title; }
22
23	//getter/setter（対象フィールド：message）
24	public String getMessage() { return message; }
25	public void setMessage(String message) { this.message = message; }
26
27	//getter/setter（対象フィールド：time）
28	public Timestamp getTime() { return time; }
29	public void setTime(Timestamp time) { this.time = time; }
30
31}
32

ContentsDao.java
1package model;
2
3import java.sql.Connection;
4import java.sql.DriverManager;
5import java.sql.PreparedStatement;
6import java.sql.ResultSet;
7import java.sql.SQLException;
8import java.util.ArrayList;
9import java.util.List;
10
11
12public class ContentsDao {
13
14
15	//JDBCドライバの相対パス
16	String DRIVER_NAME = "com.mysql.cj.jdbc.Driver";
17
18	//接続先のデータベース
19	String JDBC_URL    = "jdbc:mysql://localhost/test_db?characterEncoding=UTF-8&serverTimezone=JST&useSSL=false";
20
21	//接続するユーザー名
22	String USER_ID     = "test_user";
23
24	//接続するユーザーのパスワード
25	String USER_PASS   = "test_pass";
26
27
28	public List<ContentsDto> doSelect() {
29
30
31		try {
32			Class.forName(DRIVER_NAME);       //JDBCドライバをロード＆接続先として指定
33		} catch (ClassNotFoundException e) {
34			e.printStackTrace();
35		}
36
37
38		//JDBCの接続に使用するオブジェクトを宣言
39		Connection        con = null ;   // Connection（DB接続情報）格納用変数
40		PreparedStatement ps  = null ;   // PreparedStatement（SQL発行用オブジェクト）格納用変数
41		ResultSet         rs  = null ;   // ResultSet（SQL抽出結果）格納用変数
42
43		//抽出結果格納用DTOリスト
44		List<ContentsDto> dtoList = new ArrayList<ContentsDto>();
45
46		try {
47
48			con = DriverManager.getConnection(JDBC_URL, USER_ID, USER_PASS);
49
50
51			//発行するSQL文の生成（SELECT）
52			StringBuffer buf = new StringBuffer();
53			buf.append("SELECT                ");
54			buf.append("  NAME,               ");
55			buf.append("  TITLE,              ");
56			buf.append("  MESSAGE,            ");
57			buf.append("  TIME                ");
58			buf.append("FROM                  ");
59			buf.append("  CONTENTS            ");
60			buf.append("ORDER BY              ");
61			buf.append("  TIME                ");
62
63			ps = con.prepareStatement(buf.toString());
64			rs = ps.executeQuery();
65
66			//ResultSetオブジェクトからDTOリストに格納
67			while (rs.next()) {
68				ContentsDto dto = new ContentsDto();
69				dto.setName(              rs.getString(    "NAME"               ) );
70				dto.setTitle(             rs.getString(    "TITLE"              ) );
71				dto.setMessage(           rs.getString(    "MESSAGE"            ) );
72				dto.setTime(              rs.getTimestamp( "TIME"               ) );
73				dtoList.add(dto);
74			}
75
76		} catch (SQLException e) {
77			e.printStackTrace();
78		} finally {
79
80			//ResultSetオブジェクトの接続解除
81			if (rs != null) {    //接続が確認できている場合のみ実施
82				try {
83					rs.close();  //接続の解除
84				} catch (SQLException e) {
85					e.printStackTrace();
86				}
87			}
88
89			//PreparedStatementオブジェクトの接続解除
90			if (ps != null) {    //接続が確認できている場合のみ実施
91				try {
92					ps.close();  //接続の解除
93				} catch (SQLException e) {
94					e.printStackTrace();
95				}
96			}
97
98			//Connectionオブジェクトの接続解除
99			if (con != null) {    //接続が確認できている場合のみ実施
100				try {
101					con.close();  //接続の解除
102				} catch (SQLException e) {
103					e.printStackTrace();
104				}
105			}
106		}
107
108		//結果を返す
109		return dtoList;
110	}
111
112}

ShowAllContentsBL.java
1package model;
2
3import java.util.List;
4
5
6public class ShowAllContentsBL {
7
8
9	public List<ContentsDto> executeSelectContents() {
10
11
12		//DAOクラスをインスタンス化＆対象のユーザーデータを登録
13		ContentsDao dao = new ContentsDao();
14		List<ContentsDto> dtoList= dao.doSelect();
15
16		return dtoList;
17	}
18
19}

search_contents.js
1//検索バーに文字を入れたら発動
2window.addEventListener('DOMContentLoaded', function(){
3
4	var elmSearch = document.getElementById("SEARCH_TEXT");
5	elmSearch.addEventListener("input",function(){
6
7		 $.ajax({
8			   url:'ShowAllContents', //送信先
9			   type:'POST', //送信方法
10			   datatype: 'json', //受け取りデータの種類
11			   data:{
12			    'keyword' : $("SEARCH_TEXT").val()
13			   }
14			   })
15			   .done(function(response) {
16			         //通信成功時の処理
17
18
19			      })
20			      .fail(function(xhr) {
21			    	//通信失敗時の処理
22			      })
23			      .always(function(xhr, msg) {
24			    	//通信完了時の処理
25
26		});
27
28	});
29});

search_contents.jsで、検索バーに文字を入れたら発動するところは書けたのですが
そのあとjQueryのajaxメソッドで値を入力した文字を元に
データベースのCONTENTSテーブルから

SELECT NAME, TITLE, MESSAGE, TIME
FROM CONTENTS
WHERE MESSAGE LIKE "%入力した値%"

のようなSQL文で取ってきた結果をshow_all_contents.jspのtableに入れ直して反映させたいです。

何日調べても分からず、途方に暮れています。よろしくお願いいたします。

m.ts10806

2022/11/18 01:08

今どこまでできてるのでしょう。何を調べてますか？そのまま使えるコードはどこにも落ちてないので、本来は自身がやりたいことがどこまでできていて、どの部分ができていないかをより明確にすることだと思うのですが。「何を返してどうやって表示するか　」は仕様なので決めてそのとおり実装するしかないです

iisaniisan

2022/11/18 08:02

ありがとうございます。画面を更新しないでできる処理というのがAjaxという非同期処理で出来ることが分かり、jQueryの書き方を調べてsearch_contents.jsに書きました。 $.ajaxのdataに書いた$("SEARCH_TEXT").val()がJava側でどうしたら使えるのか書き方が分からず調べようと思ったのですが、そこで止まっています。もう少し調べてみます。

m.ts10806

2022/11/18 10:54

画面で使いたい機能をJavaサーブレットから返すことになります。サーブレットでの「出力」全てがAjaxのレスポンス（done()やsuccess）に返ってくるので、データだけならJSON形式とか、Java側でコンパイルしたVIEWが良ければJSPのforwardした結果とかを返すようにします。あとは返ってきた形式によってJavaScriptでHTMLにセットしていくだけとなります。