[Java] json라이브러리와 ajax
환경설정
json라이브러리와 ajax를 이용해 데이터 가져오기
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을 클릭했을때 반응
$("#strBtn").on("click", function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonDataTest.do",
type : "POST",
data : "choice=string",
success : function(data){ // data - 서버에서 처리한 결과를 받아줄 변수
$("#result").html(data);
},
dataType : "json" //응답데이터의 종류가뭔지
});
});
// 문자열 처리 - strBtn을 클릭했을때 반응
$("#arrayBtn").on("click", function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonDataTest.do",
type : "POST",
data : "choice=array",
success : function(data){ // data - 서버에서 처리한 결과를 받아줄 변수
let htmlCode = "";
$.each(data, function(i, v){
htmlCode += i + "번째 데이터: " + v + "<br>";
});
$('#result').html(htmlCode);
},
dataType : "json" //응답데이터의 종류가뭔지
});
});
// 객체 데이터
$("#objBtn").on("click", function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonDataTest.do",
type : "POST",
data : "choice=object",
success : function(data){ // 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" //응답데이터의 종류가뭔지
});
});
// 리스트 데이터
$("#listBtn").on("click", function(){
$.ajax({
url : "<%=request.getContextPath()%>/jsonDataTest.do",
type : "POST",
data : "choice=list",
success : function(data){ // data - 서버에서 처리한 결과를 받아줄 변수
let htmlCode = "";
$.each(data, function(i,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" //응답데이터의 종류가뭔지
});
});
// 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" //응답데이터의 종류가뭔지
});
});
});
</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="리스트데이터 가져오기">
<input type="button" id="mapBtn" value="Map데이터 가져오기">
</form>
<h3>응답 데이터 출력하기</h3>
<div id="result"></div>
</body>
</html>서블릿
package kr.or.ddit.basic.json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
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;
//ajax가 실행되고 서블릿으로 요청이 온다.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//text/html는 응답데이터가 html일때를 말한다.application/json으로 바꿔준다.
response.setContentType("application/json; charset=utf-8");
PrintWriter out = response.getWriter();
Gson gson = new Gson();
String choice = request.getParameter("choice");
// 처리한 데이터를 JSON문자열 데이터로 변환한 후 저장할 변수
String jsonData = null;
switch(choice) {
case "string" : String str = "안녕하세요"; // 처리된 결과 데이터
// 자바의 객체나 데이터를 JSON문자열로 변환한다.
jsonData = gson.toJson(str);
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-1234-1234");
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-1234-1234");
memVo1.setMem_addr("대전시 중구 오류동");
memList.add(memVo1);
MemberVO memVo2 = new MemberVO();
memVo2.setMem_id("test002");
memVo2.setMem_name("이몽둥이");
memVo2.setMem_pass("1111");
memVo2.setMem_tel("010-1234-1234");
memVo2.setMem_addr("대전시 서구 둔산동");
memList.add(memVo2);
MemberVO memVo3 = new MemberVO();
memVo3.setMem_id("test003");
memVo3.setMem_name("이몽둥삼");
memVo3.setMem_pass("2222");
memVo3.setMem_tel("010-4569-7894");
memVo3.setMem_addr("대전시 유성구 궁동");
memList.add(memVo3);
//리스트 객체만 넣어주면된당. 리스트객체가 json으로 변환될때는 배열처럼 변환된다.
jsonData = gson.toJson(memList);
break;
case "map":
HashMap<String, String> resultMap = new HashMap<String, String>();
resultMap.put("name", "변학도");
resultMap.put("age", "30");
resultMap.put("tel", "010-1234-1235");
resultMap.put("addr", "대전");
jsonData = gson.toJson(resultMap);
break;
}
out.write(jsonData);
response.flushBuffer(); // 버퍼에 남은 데이터를 강제로 출력한다.
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Author And Source
이 문제에 관하여([Java] json라이브러리와 ajax), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@vgo_dongv/Java-json라이브러리와-ajax저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
