(참고) Build Path하지 않고
WEB-INF>lib에 jar파일 넣을 것
Controller 클래스를 수정
MemberList.java
해당 list값을 전송하기 위해서
request.setAttribute("key", value)
request.getRequestDispatcher("/경로").forward(request, response)
package kr.or.ddit.member.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.member.vo.MemberVO;
@WebServlet("/MemberList.do")
public class MemberList extends HttpServlet{
private static final long serialVersionUID = 1L;
// service 객체 얻기
private IMemberService service = MemberServiceImpl.getInstance();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 클라이언트 전송시 데이터값 받기 - id, pass
String id = request.getParameter("id");
String password = request.getParameter("password");
// MemberVO member = service.login(id, password);
// service객체 얻기 - 결과값을 받는다
List<MemberVO> list = service.getAllMember();
// list를 출력 - view페이지로 이동 - jsp페이지
// 출력이 아닌 json형태로 변경
// list결과값을 jsp페이지에서도 알아야 한다
// list결과값을 현재 controller와 view페이지 - jsp와 공유해야한다
// 공유하는 방법
// request에 저장 - forward()로 호출
request.setAttribute("listvalue", list);
request.getRequestDispatcher("/member_view/memberList.jsp").forward(request, response);
}
}jsp에서 json형식으로 변환
자바 문장 중간에 끊고 이후 다시 이어가는 것도 가능
<%@page import="kr.or.ddit.member.vo.MemberVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// controller에서 저장한 데이터꺼내기
List<MemberVO> list = (List<MemberVO>)request.getAttribute("listvalue");
%>
[
<%
for(int i=0; i<list.size();i++){
MemberVO vo = list.get(i);
// out 객체를 따로 만들지 않음 내장객체
if(i!=0){
out.print(",");
}
%>
{
"mem_id" : "<%=vo.getMem_id() %>",
"mem_name" : "<%=vo.getMem_name() %>",
"mem_mail" : "<%=vo.getMem_mail() %>",
"mem_hp" : "<%=vo.getMem_hp() %>"
}
<%
}
%>
]html에서 json parse된 값으로 출력하기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<style>
.res{
display: flex;
}
.res div{
box-sizing : border-box;
flex : 25%;
}
</style>
<script>
$(function() {
$('#member').on('click', function(){
// /를 안쓰면 404 오류
getMember('/Jqpro/MemberList.do')
.then((data)=>{
res = JSON.parse(data);
code="<table border='1'><tr><th>아이디</th><th>이름</th><th>이메일</th><th>전화번호</th></tr>";
$.each(res, function(){
code += `<tr><td>${this.mem_id} </td>
<td>${this.mem_name}</td>
<td>${this.mem_mail}</td>
<td>${this.mem_hp}</td></tr>`;
})
$('#result1').html(code);
})
})
})
function getMember(url){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(new Error("오류가 발생했어요"));
xhr.send();
})
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="memberList" id="member">
<br> <br>
<form action="">
<input type="submit">
</form>
<div class="res">
<div id="result1"></div>
</div>
</div>
</body>
</html>'웹프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 회원가입페이지 만들기★ , serialize (0) | 2024.05.31 |
|---|---|
| [jQuery] 비동기 fetch, 직렬화 (0) | 2024.05.29 |
| [jQuery] 비동기 AJAX (json) (0) | 2024.05.27 |
| [jQurey] 비동기 AJAX (0) | 2024.05.24 |
| [jQuery] 동기 / 비동기 promise (0) | 2024.05.23 |
