json타입으로 문자 받기
- 변수 = this.responseText형식으로 json객체 형식의 문자열 가져오기
- JSON.parse(변수) 로 자바스크립트 객체로 변환시킴
- 변수.key 를 통해 value값을 가져올 수 있다
- 만약 json 배열 형태라면 반복문을 통해 변수[i].key를 통해 가져올 수 있다
예시
html
<!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>
<script>
const xhr = new XMLHttpRequest();
$(function(){
$('#jobj').on('click', function(){
// 서버로부터 jsonobj데이터를 응답 받는 비동기 처리
xhr.open('get', 'jobj.jsp');
xhr.send();
// 응답 - jobj.jsp가 요청에 의해서 실행된 후 생성된 결과를 가져온다
xhr.onload = function(){
if(this.readyState == 4 && this.status == 200){
// 데이터 응답 받기 - 응답 데이터의 형식 json객체 형식의 문자열
let res = this.responseText;
// res 자바스크립트 객체로 변환 - JSON.parse(json형식의 텍스트 데이터)
res = JSON.parse(res);
code = `<p>이름 : ${res.name} </p>
<p>주소 : ${res.addr}</p>
<p>전화번호 : ${res.tel}</p>`;
$('#result1').html(code);
};
}
})
$('#jobjarr').on('click', function(){
// 서버로부터 jsonobj데이터를 응답 받는 비동기 처리
xhr.open('get', 'jobarr.jsp');
xhr.send();
// 응답 - jobj.jsp가 요청에 의해서 실행된 후 생성된 결과를 가져온다
xhr.onload = function(){
if(this.readyState == 4 && this.status == 200){
// 데이터 응답 받기 - 응답 데이터의 형식 json객체 형식의 문자열
let res = this.responseText;
// res 자바스크립트 객체로 변환 - JSON.parse(json형식의 텍스트 데이터)
res = JSON.parse(res); // json object 배열
let code="";
/* for(i=0; i<res.length; i++){
code += `<p><<${(i+1)}번째 회원>></p>
<p>이름 : ${res[i].name} </p>
<p>주소 : ${res[i].addr}</p>
<p>전화번호 : ${res[i].tel}</p><br>`;
} */
/* res.forEach(function(data){
code += `<p>이름 : ${data.name} </p>
<p>주소 : ${data.addr}</p>
<p>전화번호 : ${data.tel}</p><br>`;
}) */
$.each(res, function(i, v){
code += `<p>이름 : ${v.name} </p>
<p>주소 : ${v.addr}</p>
<p>전화번호 : ${v.tel}</p><br>`;
})
$('#result2').html(code);
}
}
})
})
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="jsonobj" id="jobj"> <br> <br>
<input type="button" value="jsonobjarr" id="jobjarr"> <br> <br>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>
jobj.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/* 주석 */
// 주석 처리
// 설명
// 자바문장
// db연결 - crud 처리 - 결과값
// 결과값으로 응답데이터를 생성 - json object
%>
<%-- JSP에서의 주석
json object는 텍스트 기반의 문자열
--%>
{
"name" : "홍길동",
"addr" : "대전",
"tel" : "010-1234-5678"
}
jobarr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{ "name" : "귀오미", "addr" : "대전", "tel" : "010-9999-9999"},
{ "name" : "뽀야미", "addr" : "서울", "tel" : "010-5555-5555"},
{ "name" : "리처드", "addr" : "부산", "tel" : "010-2222-2222"}
]
promise를 활용한 json
html
<!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>
const xhr = new XMLHttpRequest();
$(function() {
$('#text').on('click', function(){
getData('text.jsp')
.then((text)=>{
// text = xhr.responseText
// 개나리/무궁화/진달래/삼천리/강아지/고양이
res = text.trim().split("/");
return res
})
.then(data => {
// 윗 단계에서 처리 후 return한 결과값을 data변수로 받음
res = `<ul>`;
for(i=0; i<data.length;i++){
res+=`<li>${data[i]}</li>`;
}
res += `</ul>`;
$('#result1').html(res);
})
})
$('#jsonarr').on('click', function(){
getData('jsonarr.jsp')
.then((data)=>{
res = JSON.parse(data);
return res;
})
.then(data => {
// 윗 단계에서 처리 후 return한 결과값을 data변수로 받음
res = `<ol>`;
for(i=0; i<data.length;i++){
res+=`<li>${data[i]}</li>`;
}
res += `</ol>`;
$('#result2').html(res);
})
})
$('#jsonobj').on('click', function(){
getData('jobj.jsp')
.then(function(text){
res = JSON.parse(text);
return res;
})
.then((data) => {
code = `<p>이름 : ${res.name} </p>
<p>주소 : ${res.addr}</p>
<p>전화번호 : ${res.tel}</p>`;
$('#result3').html(code);
})
})
$('#jobarr').on('click', function(){
getData('jobarr.jsp')
.then((data)=>{
res = JSON.parse(data);
code="";
$.each(res, function(){
code += `<p>이름 : ${this.name} </p>
<p>주소 : ${this.addr}</p>
<p>전화번호 : ${this.tel}</p><hr color="gray">`;
})
$('#result4').html(code);
})
})
})
function getData(url){
return new Promise((resolve, reject) => {
xhr.open("GET", url);
// xhr.onload = function(){resolve(this.responseText)};
xhr.onload = () => resolve(xhr.responseText);
// xhr.onerror = () => reject(xhr.statusText);
xhr.onerror = () => reject(new Error("오류가 발생했어요"));
xhr.send();
})
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="text" id="text">
<input type="button" value="arr" id="jsonarr">
<input type="button" value="jsonobj" id="jsonobj">
<input type="button" value="jobarr" id="jobarr">
<br> <br>
<div class="res">
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
</div>
</div>
</body>
</html>
text.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// db를 이용한 crud처리
// 처리된 결과값으로 응답데이터를 설정
// text 데이터 생성
// 응답을 받는 쪽에서는 의미있게 하나씩 분리해서 사용한다
%>
개나리/무궁화/진달래/삼천리/강아지/고양이
jsonarr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
["뽀야미", "리처드", "애플", "쭈니", "아잠만"]
