JAVA/개념정리
Ajax ( JSON)
inderrom
2022. 12. 6. 03:47
jsonTest.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.1.min.js"></script>
<script>
$(function(){
// 문자열
$('#strBtn').on('click', function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonData.do",
type : 'post',
data : "choice=str", // 띄어쓰기 없게 쓰셈
success : function(data){
$('#result').html(data);
},
dataType : 'json',
error : function(xhr){
alert("상태" + xhr.status)
}
})
})
//==================================================
// 배열
$('#arrBtn').on('click', function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonData.do",
type : 'post',
data : "choice=arr", // 띄어쓰기 없게 쓰셈
success : function(data){
var htmlCode = "";
$.each(data, function(i,v){
htmlCode += i + "번째 데이터 :" + v + "<br>";
});
$('#result').html(htmlCode);
},
dataType : 'json',
error : function(xhr){
alert("상태" + xhr.status)
}
})
})
//==================================================
$('#objBtn').on('click', function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonData.do",
type : 'post',
data : "choice=obj", // 띄어쓰기 없게 쓰셈
success : function(data){
//{"mem_id":"z1234","mem_pass":"9999","mem_name":"홍길동","mem_tel":"010-5555-7777","mem_addr":"대전시 중구 오류동"}
var htmlCode = "회원ID : " + data.mem_id + "<br>";
htmlCode += "비밀번호 : " + data.mem_pass + "<br>";
htmlCode += "회원이름 : " + data.mem_name + "<br>";
htmlCode += "전화번호 : " + data.mem_tel + "<br>";
htmlCode += "회원주소 : " + data.mem_addr + "<br>";
$('#result').html(htmlCode);
},
dataType : 'json',
error : function(xhr){
alert("상태" + xhr.status)
}
})
})
//==================================================
// 리스트
$('#listBtn').on('click', function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonData.do",
type : 'post',
data : "choice=list", // 띄어쓰기 없게 쓰셈
success : function(data){
//[{"mem_id":"aaaaa","mem_pass":"1111","mem_name":"일순신","mem_tel":"010-1111-1111","mem_addr":"대전"},{"mem_id":"bbbbb","mem_pass":"2222","mem_name":"이순신","mem_tel":"010-2222-1111","mem_addr":"광주"},{"mem_id":"ccccc","mem_pass":"3333","mem_name":"삼순신","mem_tel":"010-3333-1111","mem_addr":"부산"},{"mem_id":"ddddd","mem_pass":"4444","mem_name":"사순신","mem_tel":"010-4444-1111","mem_addr":"인천"}]
var htmlCode = "";
$.each(data, function(i, v){
htmlCode += i + "번째 정보<br>";
htmlCode += "회원ID : " + v.mem_id + "<br>";
htmlCode += "비밀번호 : " + v.mem_pass + "<br>";
htmlCode += "회원이름 : " + v.mem_name + "<br>";
htmlCode += "전화번호 : " + v.mem_tel + "<br>";
htmlCode += "회원주소 : " + v.mem_addr + "<hr>";
});
$('#result').html(htmlCode);
},
dataType : 'json',
error : function(xhr){
alert("상태" + xhr.status)
}
})
})
//==================================================
// Map 객체
$('#mapBtn').on('click', function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonData.do",
type : 'post',
data : "choice=map", // 띄어쓰기 없게 쓰셈
success : function(data){
//{"name":"이순신","addr":"서울","age":"30"}
var htmlCode = "";
htmlCode += "이름 : " + data.name + "<br>";
htmlCode += "나이 : " + data.age + "<br>";
htmlCode += "주소 : " + data.addr + "<br>";
$('#result').html(htmlCode);
},
dataType : 'json',
error : function(xhr){
alert("상태" + xhr.status)
}
})
})
})
</script>
</head>
<body>
<form>
<input type="button" id="strBtn" value="문자열">
<input type="button" id="arrBtn" value="배 열">
<input type="button" id="objBtn" value="객 체">
<input type="button" id="listBtn" value="리스트">
<input type="button" id="mapBtn" value="Map객체">
</form>
<hr>
<h3>결과 출력</h3>
<div id="result"></div>
</body>
</html>
JsonDataTest
package kr.or.ddit.basic.json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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.vo.MemberVO;
@WebServlet("/jsonData.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일 때의 ContentType 설정
response.setContentType("application/json; charset=utf-8");
String choice = request.getParameter("choice");
//JSON라이브러리 객체 생성
Gson gson = new Gson();
String jsonData = null; // josn으로 변환된 데이터가 저장될 변수 선언
switch(choice) {
case "str" :
String str = "안녕하세요";
jsonData = gson.toJson(str); // json데이터로 변환하기
break;
case "arr" :
int[] intArr = {10,20,30,40,50};
jsonData = gson.toJson(intArr);
break;
case "obj" :
MemberVO memVo = new MemberVO();
memVo.setMem_id("z1234");
memVo.setMem_name("홍길동");
memVo.setMem_pass("9999");
memVo.setMem_tel("010-5555-7777");
memVo.setMem_addr("대전시 중구 오류동");
jsonData = gson.toJson(memVo);
break;
case "list":
List<MemberVO> memList = new ArrayList<>();
memList.add(new MemberVO("aaaaa","1111","일순신","010-1111-1111","대전"));
memList.add(new MemberVO("bbbbb","2222","이순신","010-2222-1111","광주"));
memList.add(new MemberVO("ccccc","3333","삼순신","010-3333-1111","부산"));
memList.add(new MemberVO("ddddd","4444","사순신","010-4444-1111","인천"));
jsonData = gson.toJson(memList);
break;
case "map" :
Map<String, String> map = new HashMap<String, String>();
map.put("name", "이순신");
map.put("age", "30");
map.put("addr", "서울");
jsonData = gson.toJson(map);
break;
}
System.out.println("jsonData ==>" + jsonData);
PrintWriter out = response.getWriter();
out.write(jsonData); // JSON데이터를 응답으로 보내준다.
response.flushBuffer();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
lprodMain.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.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#lprodBtn').on('click', function(){
$.ajax({
url : '<%=request.getContextPath()%>/lprodList.do',
type : 'get',
success : function(data){
var htmlCode = "<table border='1'>";
htmlCode += "<tr><th>LPROD_ID</th><th>LPROD_GU</th><th>LPROD_NM</th></tr>";
$.each(data, function(i,v){
htmlCode += "<tr><td>" + v.lprod_id + "</td>";
htmlCode += "<td>" + v.lprod_gu + "</td>";
htmlCode += "<td>" + v.lprod_nm + "</td></tr>";
});
htmlCode +="</table>";
$('#result').html(htmlCode);
},
error : function(xhr){
alert("상태" + xhr.code);
},
dataType : 'json'
});
});
$('#lprodBtn2').on('click', function(){
location.href="<%=request.getContextPath()%>/lprodList2.do";
});
});
</script>
</head>
<body>
<form>
<input type="button" id="lprodBtn" value="Lprod 자료 가져오기(비동기 방식, Ajax)"> <!--화면 전환 없다 그래서 주소도 안 바뀜 .. 순차적이지 않음 -->
<input type="button" id="lprodBtn2" value="Lprod 자료 가져오기(동기방식)"> <!-- 화면 전환이 되고 주소도 바뀜 순차적임 -->
</form>
<h3>Lprod 자료 목록</h3>
<div id="result"></div>
</body>
</html>
LprodList (비동기방식 - ajax)
package kr.or.ddit.basic.json;
import java.io.IOException;
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.vo.LprodVO;
@WebServlet("/lprodList.do")
public class LprodList 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");
Gson gson = new Gson();
LprodDao dao = new LprodDao();
String jsonData = null;
List<LprodVO> lprodList = dao.getAllLprod();
jsonData = gson.toJson(lprodList);
response.getWriter().write(jsonData);
response.flushBuffer();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}lprodList.jsp
<%@page import="kr.or.ddit.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>
<%
List<LprodVO> lprodList = (List<LprodVO>)request.getAttribute("list");
%>
<body>
<h3>Lprod 자료 목록</h3>
<table border='1'>
<tr><th>LPROD_ID</th><th>LPROD_GU</th><th>LPROD_NM</th></tr>
<%
if(lprodList == null || lprodList.size()==0){
%>
<tr><td colspan="3" style="text-align:center;">자료가 하나도 없습니다.</td></tr>
<%
}else{
for(LprodVO lvo : lprodList){
%>
<tr>
<td><%=lvo.getLprod_id() %></td>
<td><%=lvo.getLprod_gu() %></td>
<td><%=lvo.getLprod_nm() %></td>
</tr>
<%
}
}
%>
</table>
</body>
</html>
LprodList2 (동기방식)
package kr.or.ddit.basic.json;
import java.io.IOException;
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.vo.LprodVO;
@WebServlet("/lprodList2.do")
public class LprodList2 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");
LprodDao dao = new LprodDao();
List<LprodVO> lpordList = dao.getAllLprod();
request.setAttribute("list", lpordList);
request.getRequestDispatcher("/basic/json/lprodList.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}