質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

サーブレット

サーブレット(Servlets)とはウェブやアプリケーションサーバー上に動くプログラムのことであり、ウェブブラウザや他のHTTPクライエントとデータベースやHTTPサーバー上のアプリケーションの中間層としての働きをします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

受付中

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

iisaniisan
iisaniisan

総合スコア75

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

サーブレット

サーブレット(Servlets)とはウェブやアプリケーションサーバー上に動くプログラムのことであり、ウェブブラウザや他のHTTPクライエントとデータベースやHTTPサーバー上のアプリケーションの中間層としての働きをします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0回答

0グッド

0クリップ

215閲覧

投稿2022/11/17 13:03

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に入れ直して反映させたいです。

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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にセットしていくだけとなります。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

サーブレット

サーブレット(Servlets)とはウェブやアプリケーションサーバー上に動くプログラムのことであり、ウェブブラウザや他のHTTPクライエントとデータベースやHTTPサーバー上のアプリケーションの中間層としての働きをします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。