고급JAVA 31강 - Ajax

jsonTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax, json연습</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	
	// 문자열 데이터
	$('#strBtn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonDataTest.do",
			type : "post",
			data : "choice=string",//각각의 버튼을 누를 때마다 다른 데이터를 보내야 함
			success : function(data){
				$('#result').html(data);
			},
			dataType : "json" //응답데이터의 종류가 무엇인지 지정 (text나 html도 가능)
		});
	});
	
	// 배열데이터
	$('#arrayBtn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonDataTest.do",
			type : "post",
			data : "choice=array",
			success : function(data){
				let htmlCode = "";
				$.each(data, function(i,v){ // i는 인덱스값, v는 실제데이터
					htmlCode += i + "번째 데이터 : " + v + "<br>";
				});
				
				$('#result').html(htmlCode);
				
			},
			dataType : "json" //응답데이터의 종류가 무엇인지 지정 (text나 html도 가능)
		});
	});
	
	// 객체데이터
	$('#objBtn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonDataTest.do",
			type : "post",
			data : "choice=object",
			success : function(data){
				// data => ("mem_id" : "test001", "mem_name" : "이몽룡")
				let htmlCode = "회원ID : " + data.mem_id + "<br>";
				htmlCode += "회원이름 : " + data.mem_name + "<br>";
				htmlCode += "비밀번호 : " + data.mem_pass + "<br>";
				htmlCode += "전화번호 : " + data.mem_tel + "<br>";
				htmlCode += "회원주소 : " + data.mem_addr + "<br>";
				
				$('#result').html(htmlCode);
			},
			dataType : "json" //응답데이터의 종류가 무엇인지 지정 (text나 html도 가능)
		});
	});
	
	// List데이터
	$('#listBtn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonDataTest.do",
			type : "post",
			data : "choice=list",
			success : function(data){
				let htmlCode = "";
				$.each(data, function(i,v){ // 배열 안에 들어있는 값이 v에 하나씩 들어감
					htmlCode += i +"번째 자료<br>";
					htmlCode += "회원ID : " + v.mem_id + "<br>";
					htmlCode += "회원이름 : " + v.mem_name + "<br>";
					htmlCode += "비밀번호 : " + v.mem_pass + "<br>";
					htmlCode += "전화번호 : " + v.mem_tel + "<br>";
					htmlCode += "회원주소 : " + v.mem_addr + "<br>";
					htmlCode += "<hr color='blue'>";
				});
				
				$('#result').html(htmlCode);
			},
			dataType : "json" //응답데이터의 종류가 무엇인지 지정 (text나 html도 가능)
		});
	});
	
	// Map데이터
	$('#mapBtn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonDataTest.do",
			type : "post",
			data : "choice=map",
			success : function(data){
				let htmlCode = "name : " + data.name + "<br>";
				htmlCode += "age : " + data.age + "<br>";
				htmlCode += "tel : " + data.tel + "<br>";
				htmlCode += "addr : " + data.addr + "<br>";
				$('#result').html(htmlCode);
				
			},
			dataType : "json" //응답데이터의 종류가 무엇인지 지정 (text나 html도 가능)
		});
	});
	
});
</script>

</head>
<body>
<form>
	<input type="button" id="strBtn" value="문자열데이터 가져오기"> 
	<input type="button" id="arrayBtn" value="배열데이터 가져오기"> 
	<input type="button" id="objBtn" value="객체데이터 가져오기"> 
	<input type="button" id="listBtn" value="List데이터 가져오기"> 
	<input type="button" id="mapBtn" value="Map데이터 가져오기"> 
</form>
<h3>응답 데이터 출력하기</h3>
<div id="result"></div>
</body>
</html>

JsonDataTest.java

package kr.or.ddit.json;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;

import javax.print.attribute.HashAttributeSet;
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;

import kr.or.ddit.basic.vo.MemberVO;

@WebServlet("/jsonDataTest.do")
public class JsonDataTest extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		response.setCharacterEncoding("utf-8");
		//응답으로 받을 데이터는 json데이터라는 것을 알려줌
		response.setContentType("application/json; charset=utf-8"); 
		PrintWriter out = response.getWriter();
		
		Gson gson = new Gson();
		
		// ajax에서 데이터 받아오기
		String choice = request.getParameter("choice");
		
		// 처리한 데이터를 JSON 문자열 데이터로 변환한 후 저장할 변수
		String jsonData = null;  
		
		switch(choice) {
		case "string" : 
			String str = "안녕하세요"; // 처리된 결과 데이터
			// 자바의 객체나 데이터를 JSON문자열로 변환한다.
			jsonData = gson.toJson(str); // 변환하고 싶은 문자열 파라미터값으로 입력 - JSON문자열로 바꿔줌
			break;
		case "array" :
			int[] arr = new int[] {100,200,300,400};
			
			jsonData = gson.toJson(arr);
			break;
		case "object" :
			MemberVO memVo = new MemberVO();
			memVo.setMem_id("test001");
			memVo.setMem_name("이몽룡");
			memVo.setMem_pass("0000");
			memVo.setMem_tel("010-9999-8888");
			memVo.setMem_addr("대전시 중구 오류동");
			
			jsonData = gson.toJson(memVo);
			break;
		case "list" :
			ArrayList<MemberVO> memList = new ArrayList<MemberVO>();
			MemberVO memVo1 = new MemberVO();
			memVo1.setMem_id("test001");
			memVo1.setMem_name("이몽룡");
			memVo1.setMem_pass("0000");
			memVo1.setMem_tel("010-9999-8888");
			memVo1.setMem_addr("대전시 중구 오류동");
			memList.add(memVo1);
			
			MemberVO memVo2 = new MemberVO();
			memVo2.setMem_id("test002");
			memVo2.setMem_name("성춘향");
			memVo2.setMem_pass("22222");
			memVo2.setMem_tel("010-7777-6666");
			memVo2.setMem_addr("대전시 서구 도마동");
			memList.add(memVo2);
			
			MemberVO memVo3 = new MemberVO();
			memVo3.setMem_id("test003");
			memVo3.setMem_name("강감찬");
			memVo3.setMem_pass("55555");
			memVo3.setMem_tel("010-5555-4444");
			memVo3.setMem_addr("대전시 동구 대동");
			memList.add(memVo3);
			
			jsonData = gson.toJson(memList);
			
			break;
			
		case "map" : // key값이 속성이 됨
			HashMap<String, String> resultMap = new HashMap<String, String>();
			resultMap.put("name", "변학도");
			resultMap.put("age", "30");
			resultMap.put("tel", "010-1010-2929");
			resultMap.put("addr", "대전");
			
			jsonData = gson.toJson(resultMap);
			
			break;
			
		}
		
		out.write(jsonData); // print와 같음, 보통 write를 씀 (응답 데이터를 사용자쪽으로 보내는 것)
		response.flushBuffer(); // 버퍼에 남은 데이터 강제로 출력하기
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

lprodTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	$('#btn').on('click', function(){
		$.ajax({
			url : "<%=request.getContextPath()%>/jsonLprodTest.do",
			type : 'get',
			success : function(res){
				str = "";
					str += "<table border='1'>";
					str += "<tr><td>LPROD_ID</td>";
					str += "<td>LPROD_GU</td>";
					str += "<td>LPROD_NM</td></td>";
				$.each(res, function(i,v){
					str += "<tr><td>" + v.lprod_id +"</td>";
					str += "<td>" + v.lprod_gu +"</td>";
					str += "<td>" + v.lprod_nm +"</td></tr>";
				})
				str +="</table>";
				$('#result').html(str);
			},
			error : function(xhr){
				alert("상태 : " + xhr.status);
			},
			dataType : 'json' 
				
		});
		
	});
	
	//---------------------------------------
	
	// 동기 방식 처리
	$('#btn2').on('click', function(){
		location.href="<%=request.getContextPath()%>/jsonLprodTest2.do";
	});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Lprod자료 가져오기(Ajax)">
<input id="btn2" type="button" value="Lprod자료 가져오기(nonAjax)">
<br>
<h3>Lprod 자료 목록</h3>
<div id="result"></div>
</body>
</html>

JsonLprodTest.java

package kr.or.ddit.json;

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 com.google.gson.Gson;

import kr.or.ddit.basic.vo.LprodVO;

@WebServlet("/jsonLprodTest.do")
public class JsonLprodTest extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		Gson gson = new Gson();
		
		// 처리한 데이터를 Json 문자열 데이터로 변환 후 저장할 변수
		String jsonData = null;
		
		//dao 호출해서 데이터 받아오기
		LprodDao dao = LprodDao.getInstance();
		
		List<LprodVO> list = dao.getAllLprod();
		jsonData = gson.toJson(list);
		
		out.write(jsonData);
		response.flushBuffer();
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

JsonLprodTest2.java

-> 동기방식

package kr.or.ddit.json;

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 com.google.gson.Gson;

import kr.or.ddit.basic.vo.LprodVO;

@WebServlet("/jsonLprodTest2.do")
public class JsonLprodTest2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		LprodDao dao = LprodDao.getInstance();
		List<LprodVO> list = dao.getAllLprod();
		
		request.setAttribute("lpList", list);
		
		// 처리된 결과 데이터를 JSP문서로 forwarding방식으로 보낸다.
		request.getRequestDispatcher("/json/lprodList2.jsp").forward(request, response);
		
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

lprodList2.jsp

<%@page import="kr.or.ddit.basic.vo.LprodVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	//서블릿이 보낸 데이터를 받는다.
	List<LprodVO> lprodList = (List<LprodVO>)request.getAttribute("lpList");  
%>
<h2>Lprod 자료 목록</h2>
<table border='1'>
<tr>
	<th>LPROD_ID</th><th>LPROD_GU</th><th>LPROD_NM</th>
</tr>
<%
for(LprodVO lvo : lprodList){
	
%>
<tr>
	<td><%=lvo.getLpord_id() %></td>
	<td><%=lvo.getLpord_gu() %></td>
	<td><%=lvo.getLpord_nm() %></td>
</tr>

<%
}
%>

</table>


</body>
</html>
사이드 프로젝트 회고록 - 매일말씀
[Medium] Design

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage