サーブレットにjQueryを使ってajaxでリクエストを出してデータベースからデータを取ってきたい

html
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7<link rel="stylesheet" type="text/css" href="style.css">
8<meta charset="UTF-8">
9<title>success</title>
10</head>
11<body>
12<header class="header">
13<h1>こんにちは
14<%=session.getAttribute("username")%>さん
15</h1>
16 <nav class="global-nav">
17<form   action="/webkensyu/Userlist"   method="post">
18<button type="submit"  class="select" id="button1" name="button"  value="user"   >ユーザー一覧  </button>
19<button type="submit"  class="select" id="button2" name="button"  value="pass"   >パスワード変更</button>
20<button type="submit"  class="select" id="button3" name="button"  value="address">住所一覧      </button>
21<button type="submit"  class="select" id="button4" name="button"  value="out"    >ログアウト    </button>
22</form>
23</nav>
24</header>
25<div class="sidemenu">
26<h2 class="heading">メニュー</h2>
27<ul class="menus">
28<li class="side-menu1">
29<h3 class="menu">ユーザー情報</h3>
30<ul class="side-menu-item">
31<li><button  class="side-button" id="user_list"  value="user">ユーザー一覧</button></li>
32<li><a href="#">住所一覧</a></li>
33<li><a href="#">パスワード変更</a></li>
34</ul>
35</li>
36<li class="side-menu1">
37<h3 class="menu">ユーザー情報Ajax</h3>
38<ul class="side-menu-item">
39<li><a href="#">ユーザー一覧</a></li>
40<li><a href="#">住所一覧</a></li>
41<li><a href="#">パスワード変更</a></li>
42</ul>
43</li>
44<li>
45<details>
46<summary class="summary" style="cursor: pointer;">
47お問い合わせ
48</summary>
49<ul>
50<li><a href="#">phone</a></li>
51<li><a href="#">mail</a></li>
52<li><a href="#">その他</a></li>
53</ul>
54</details>
55</li>
56</ul>
57  <h2 class="hidden">SEARCH</h2>
58  <form class="search-box">
59    <input class="search-input" type="text" name="search" placeholder="SEARCH">
60    <input class="search-button" type="submit" value="検索">
61  </form>
62  </div>
63  <div id="test1"></div>
64<footer class="footer">
65<ul class="footer-link">
66<li class="footer-item"><a href="#">sns</a></li>
67<li class="footer-item"><a href="#">...</a></li>
68<li class="footer-item"><a href="#">top</a></li>
69</ul>
70 <div class="footer_time">
71 時刻:<span id="time" class="time"></span>
72</div>
73</footer>
74<script src="kensyu.js"></script>
75</body>
76</html>

jQuery
1$('#user_list').on('click',function(){
2	
3	var val= $('#user_list').val();
4	
5	$.ajax({
6		
7		url:"Userlist",
8		type:"POST",
9		cache:false,
10		data:{'one':val},  
11	//	dataType:html,
12		success: function(data){		
13			userlist = data;
14			$("#test1").text(userlist);			
15		},
16		  error : function(XMLHttpRequest, textStatus, errorThrown) {
17		      alert("エラーが発生しました：" + textStatus +":\n" + errorThrown);
18		    }				
19	});
20		
21});
22

java
1package servlet;
2
3import java.io.IOException;
4import java.io.PrintWriter;
5import java.util.ArrayList;
6import java.util.List;
7
8import javax.servlet.RequestDispatcher;
9import javax.servlet.ServletException;
10import javax.servlet.annotation.WebServlet;
11import javax.servlet.http.HttpServlet;
12import javax.servlet.http.HttpServletRequest;
13import javax.servlet.http.HttpServletResponse;
14
15import dao.USER_DB;
16import model.UserDTO;
17
18
19@WebServlet("/Userlist")
20public class Userlist extends HttpServlet {
21	private static final long serialVersionUID = 1L;
22       
23    public Userlist() {
24        super();
25    }
26
27
28	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29	
30		
31
32	}
33		 
34
35	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36		
37		request.setCharacterEncoding("UTF-8");
38				
39		String button = request.getParameter("one");
40				
41		 if( button.equals("user")) {
42			 
43			 try {
44				
45			
46			//ユーザ情報をデータベースから取得するクラス
47			 USER_DB user_db = new USER_DB();
48			 
49			 //ユーザid と　ユーザ名の値がセットさせたdtoクラスが格納させた配列を取得
50			 List<UserDTO> userlist =  (ArrayList<UserDTO>) user_db.getUser();
51		
52			 
53			  PrintWriter pw = response.getWriter(); 
54		       pw.print(userlist);
55		       pw.close();
56 
57			 } catch(Exception e) {
58			        e.printStackTrace();
59			    }
60		 }
61		 if(button.equals("pass")){
62			 RequestDispatcher dispatcher = request.getRequestDispatcher("/password.jsp");
63				dispatcher.forward(request,  response);	 
64		 }
65		 if(button.equals("out")){ 
66			 RequestDispatcher dispatcher = request.getRequestDispatcher("/login.html");
67				dispatcher.forward(request,  response);
68		 }
69		 if(button.equals("address")){
70			 RequestDispatcher dispatcher = request.getRequestDispatcher("/Address");
71				dispatcher.forward(request,  response);
72		 }
73	}
74}
75
76

html
1<li><button  class="side-button" id="user_list"  value="user">ユーザー一覧</button>

このボタンが押されたときにjqueryで非同期にサーブレット通信したいと考えております。

しかし、現在のコードで実行して表示すると
[model.UserDTO@52b26f15, model.UserDTO@409af61d, model.UserDTO@7d940b0d, model.UserDTO@261c2e4, model.UserDTO@604207f4, model.UserDTO@f18558b, model.UserDTO@698206b, model.UserDTO@6d78542e]

と配列で取得しているので、変な感じでデータが表示されてしまいます。

取得の時、何か設定などがいるのでしょうか？

また、配列をレスポンスで返してもらった場合、jqueryで表示する値を加工してjspで表示したほうがいいのか、それとも配列をjspに渡してjspで処理して表示させた方がいいのでしょうか？

また、ajax受け取ったレスポンスはhmtlでどこにでも自由に表示できるでしょうか？

調べても分からないことだらけだったので、少しでもアドバイス頂けると助かります。

-追記-

java
1if( button.equals("user")) {
2			 
3			 try {
4				
5			//ユーザ情報をデータベースから取得するクラス
6			 USER_DB user_db = new USER_DB();
7			 
8			 //ユーザid と　ユーザ名の値がセットさせたdtoクラスが格納させた配列を取得
9			 ArrayList<UserDTO> userlist =  (ArrayList<UserDTO>) user_db.getUser();
10			 	 
11			// ArrayList<Integer>  userId = new ArrayList<Integer>();
12			 List<String>  userName = new ArrayList<String>();
13			 
14			 for(int i = 0; i < userlist.size(); i++) {
15				 
16				 userName.add(userlist.get(i).getName());				 
17			 }
18			 
19			  PrintWriter pw = response.getWriter(); 
20		       pw.print(userName);
21		       pw.close();
22 
23			 } catch

for(int i = 0; i < userlist.size(); i++) {

			 userName.add(userlist.get(i).getName());				 
		 }

上記でString の list に入れなおして、それをレスポンスとして返して
表示すると
[aaa, aaaa, ew, fwfwe, gtgt, root, sa, sasa, sasaa]
に表示されます。（データベースのデータ）
表示は、しっかりされるようになりました。

しかし、一つ一つの要素の取り出しが上手くできません。

success: function(data){		
		userlist = data;
		$("#test1").text(userlist[0]);			
	}

こう書いてしまうと、表示が　[ となり、要素ではなく、ポインタ？　みたいな感じで表示されてしまいます。

解決できなったのでアドバイス頂けると助かります。

--追記２--

PrintWriter pw = response.getWriter();
pw.print(userName);
だと　文字列としてレスポンスされるみたいで、うまくいきません。
一つのデータ（固まり）として　レスポンスはできないのでしょうか？

m.ts10806

2019/09/28 22:52

>jサーブレットにリQueryをタイトルがグチャグチャになってます。調整願います

kokok

2019/09/29 01:30

すみません。修正しました。

行動規範の内容に同意します

回答1件

ベストアンサー

PrintWriter#print() はオブジェクトの toString() を使って文字列表現を作るのですが、UserDTO#toString()を定義しておらず、Object#toString()が使われているために「変な感じで」表示されています。

なので解決方法としては、以下のいずれかがよいでしょう。

UserDTO#toString()を適切に実装する
UserDTOを文字列表現に変換したものをList<String>に格納してPrintWrite#print()に渡す

投稿2019/09/29 06:14

matobaa

総合スコア2493

kokok

2019/09/30 00:42

回答ありがとうございます。勉強になりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

サーブレットにjQueryを使ってajaxでリクエストを出してデータベースからデータを取ってきたい

関連した質問