고래씌
[JSP] 6-2. AJAX (Gson ,ArrayList 받기) 본문
1. 서버로 데이터 전송 후, 조회된 객체를 응답데이터로 받기
▶ Member 클래스 생성
package com.kh.controller;
// DB에서 결과값을 담아줄 vo클래스
public class Member {
private int memberNo;
private String name;
private int age;
private String gender;
public Member(int memberNo, String name, int age, String gender) {
this.memberNo = memberNo;
this.name = name;
this.age = age;
this.gender = gender;
}
public int getMemberNo() {
return memberNo;
}
public void setMemberNo(int memberNo) {
this.memberNo = memberNo;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public String toString() {
return "Member [memberNo=" + memberNo + ", name=" + name + ", age=" + age + ", gender=" + gender + "]";
}
}
▶ index.jsp
<h3>3. 서버로 데이터 전송 후, 조회된 객체를 응답데이터로 받기</h3>
회원번호 입력 : <input type="number" id="input3">
<button id="btn5">조회</button>
<div id="output3"></div>
<script>
$(function(){
$("#btn5").click(function(){
$.ajax({
url : 'jqAjax3.do',
data : {no : $("#input3").val()},
success : result => {
console.log(result);
const resultStr = `회원번호 : ${result.memberNo} <br>
이름 : ${result.name} <br>
나이 : ${result["age"]} <br>
성별 : ${result["gender"]} <br>`;
$("#output3").html(resultStr);
},
error : function(req, status, error){
console.log(result);
}
})
})
})
</script>
▶ JqAjaxController3.java(Servlet)
☞ 아래와 같은 방식으로 넘기면 안된다!!
| response.getWriter().print(m); |
Member클래스의 toString() 메소드가 호출되어서 문자열이 넘어가기 때문에 이상태로는 Member객체를 사용할 수 없다. 가공처리 후, 넘겨주어야 한다!
☞ 아래와 같은 방법으로 가공처리후 넘겨주면 된다. 하지만 이와 같은 방법은 하나하나 다 입력하기에는 번거로움이 발생한다. 그래서 우리는 GSON을 이용하도록 하겠다!
| // {속성:속성값} JSONObject jobj = new JSONObject(); jobj.put("memberNo", m.getMemberNo()); // "{memberNo : 1}" jobj.put("name", m.getName()); // "{memberNo : 1, name : '홍길동'}" jobj.put("age", m.getGender()); jobj.put("gender", m.getGender()); response.getWriter().print(jobj); |
▶ GSON을 이용하기 위해 MVN 레퍼지토리 홈페이지에서 다운로드
=> 2.8.5 버전 클릭 후 jar 버튼 클릭
▶ GSON을 이용하여 Member 객체에 값 담기(Servlet) JqAjaxController3.java
package com.kh.controller;
import java.io.IOException;
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 org.json.simple.JSONObject;
import com.google.gson.Gson;
/**
* Servlet implementation class JqAjaxController3
*/
@WebServlet("/jqAjax3.do")
public class JqAjaxController3 extends HttpServlet {
private static final long serialVersionUID = 1L;
public JqAjaxController3() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int memberNo = Integer.parseInt(request.getParameter("no"));
// 데이터를 조회했다는 가정하에 Member객체에 값을 담기
Member m = new Member(memberNo, "홍길동", 30, "남");
// GSON : Google JSON
// GSON 라이브러리를 연동해서 간편하게 자바클래스를 JSONObject로 변환하기
Gson gson = new Gson();
// 매개변수로 들어간 객체를 JSONObject로 변환해주는 함수
// 단, 변화시 전달되는 키값은 vo객체의 필드명으로 자동으로 설정된다. 키값 자동으로 설정되면서 안에있는 value값으로 들어감
String json = gson.toJson(m);
// 응답할 객체에 vo객체 하나만 전달시 JSONObject로,
// ArrayList로 전달시 JSONArray로 만들어진다.
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
▶ 결과화면
2. 응답데이터로 여러개의 객체들이 담겨있는 ArrayList 받기
1) 데이터를 배열형태로 전달받았을 때
▶ Servlet
package com.kh.controller;
import java.io.IOException;
import java.util.ArrayList;
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 com.google.gson.Gson;
/**
* Servlet implementation class jqAjaxController4
*/
@WebServlet("/jqAjax4.do")
public class jqAjaxController4 extends HttpServlet {
private static final long serialVersionUID = 1L;
public jqAjaxController4() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Member> list = new ArrayList();
list.add(new Member(1,"홍길동", 30, "남"));
list.add(new Member(2,"고길동", 50, "남"));
list.add(new Member(3,"김말숙", 20, "여"));
response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(list, response.getWriter()); // response.getWriter()을 통해 list를 쏴줄것이다
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
▶ index.jsp
<h3>4. 응답데이터로 여러개의 객체들이 담겨있는 ArrayList 받기</h3>
<button id="btn6">회원전체조회</button>
<table id="output4" border="1" style="text-align:center">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(function(){
$("#btn6").click(function(){
$.ajax({
url : 'jqAjax4.do',
success : function(result) {
// 데이터를 배열형태로 전달받았을 때
let html2 = '';
for(let m of result){
html2 += `<tr>`
+ `<td>${m.memberNo}</td>`
+ `<td>${m.name}</td>`
+ `<td>${m.age}</td>`
+ `<td>${m.gender}</td>`
+ `<tr>`;
}
$("#output4 tbody").html(html2);
}
})
})
})
</script>
2) 데이터를 JSP(html)형태로 전달받았을 때
▶ Servlet
package com.kh.controller;
import java.io.IOException;
import java.util.ArrayList;
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 com.google.gson.Gson;
/**
* Servlet implementation class jqAjaxController4
*/
@WebServlet("/jqAjax4.do")
public class jqAjaxController4 extends HttpServlet {
private static final long serialVersionUID = 1L;
public jqAjaxController4() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Member> list = new ArrayList();
list.add(new Member(1,"홍길동", 30, "남"));
list.add(new Member(2,"고길동", 50, "남"));
list.add(new Member(3,"김말숙", 20, "여"));
request.setAttribute("list",list); // => 이 방식으로 포워딩을 해준다면 문제가 발생할 수 있다.
request.getRequestDispatcher("views/htmlTest.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
▶ htmlTest.jsp 파일 생성(포워드할 html파일 생성)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.ArrayList, com.kh.controller.Member"%>
<%
ArrayList<Member> list = (ArrayList<Member>) request.getAttribute("list");
%>
<% for(Member m : list) { %>
<tr>
<td><%=m.getMemberNo() %></td>
<td><%=m.getName() %></td>
<td><%=m.getAge() %></td>
<td><%=m.getGender() %></td>
<tr>
<% } %>
▶ index.jsp
<h3>4. 응답데이터로 여러개의 객체들이 담겨있는 ArrayList 받기</h3>
<button id="btn6">회원전체조회</button>
<table id="output4" border="1" style="text-align:center">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(function(){
$("#btn6").click(function(){
$.ajax({
url : 'jqAjax4.do',
success : function(result) {
// 데이터를 JSP(html)형태로 전달받았을 때
console.log(result);
$("#output4 tbody").html(result);
}
})
})
})
</script>
=> 회원전체 조회 클릭하면 이처럼 표가 완성됨
'Server > JSP과 Servlet' 카테고리의 다른 글
| [JSP] 6-4. 아이디 중복체크 기능, 댓글 기능 (0) | 2023.12.15 |
|---|---|
| [JSP] 6-3. AJAX(게시글 리스트 검색, XML데이터 가져오기, 파일 업로드 처리) (0) | 2023.12.14 |
| [JSP] 6-1. AJAX 개요, get&post방식으로 서버에 데이터 전송 및 응답(ajax 통신, json) (0) | 2023.12.14 |
| [JSP] 5-4. 사진게시판(썸네일) (0) | 2023.12.13 |
| [JSP] 5-3. 게시판 상세 페이지 수정, 삭제 (0) | 2023.12.12 |
'Server/JSP과 Servlet' Related Articles
more
