LANGUANGE/JSON
[JSON] Ajax + JSON 으로 데이터 가져오기
꾸준히개발하자
2022. 3. 18. 10:11
newsTitleJSON.jsp
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!-- text/plain 으로 바꿔줌 일반적인 텍스트 이니까 -->
{
"count":6,
"titles":[
{
"publisher":"동아",
"headline":"[속보] 김세환 선관위 사무총장 사의 표명"
},
{
"publisher":"CNN",
"headline":"50만원짜리 삼성폰 실물공개…'가성비 갑vs충전기는?'"
},
{
"publisher":"한국",
"headline":"1억 넣으면 하루 5400원씩 매일 이자 준다는 '이것'"
},
{
"publisher":"JTBC",
"headline":"'GOS 논란 삼성 사과하라'…주총 찾은 1600명 개미들"
},
{
"publisher":"KBS",
"headline":"피해 급증 우크라…젤렌스키 대통령, 결단 내렸다"
},
{
"publisher":"MBC",
"headline":"중립국 핀란드 변화에…'푸틴, 땅치고 후회할 수도'"
}
]
}데이터 저장 키와value
newsTitleJSON_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.news {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: yellow;
color: blue;
border: 1px dashed black;
width: 50%;
}
.newsError {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: orange;
color: red;
border: 1px dashed black;
width: 50%;
}
</style>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function newsTitle() {
// 보냄
sendRequest("newsTitleJSON_ok.jsp",null,displayNewsTitle,"GET");
}
// 콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// json 데이터 받음
var jsonStr = httpRequest.responseText;
// alert(jsonStr);
// eval은 변수를 javascript의 함수처럼 사용하는 명령어
// 객체화 해서 집어넣는다.
// jsonStr 내용을 객체화 해서 jsonObject에 넣는다.(돔객체로바꿈)
var jsonObject = window.eval('(' + jsonStr + ')');
// alert(jsonObject);
// alert(jsonObject.count); // 객체화 했기때문에 접근할수있다. 6
// alert(jsonObject.titles[2].publisher); // 한국
var count = jsonObject.count;
if(count>0){
var htmlData = "<ol>";
for(var i=0; i<jsonObject.titles.length;i++){
// 데이터 꺼냄
var publisherStr = jsonObject.titles[i].publisher;
var headlineStr = jsonObject.titles[i].headline;
htmlData += "<li>" + headlineStr + " [" +
publisherStr + "]</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("newsDiv");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr/>
<br/>
<div style="width: 50%; margin: 0 auto;">뉴스보기</div>
<div id="newsDiv" class="news"></div>
</body>
</html>JSON 에 저장된 값 가져오기
newsTitleJSON2_ok.jsp
( 일반적인 데이터를 json 형태로 만드는 방법 )
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%!
/* db에서 가져온 데이터 라고 생각해본다. */
String[] newsTitle = {
"[속보]윤석열 부동산 정책, 집값 '대세 하락' 가속화하나",
"물가는 뛰고, 경기는 힘 빠지고…韓 경제 스태그플레이션 진입하나",
"조국사태 교훈? 尹측 靑 인사 추천만, 법무 경찰이 검증",
"'친문 전력' 김오수 어떡하나…권성동 스스로 거취 정해야",
"[강준만의 직설] '충성 경쟁'이 대통령을 망친다",
"코로나 신규확진 40만명대…정부는 감염병 등급 하향",
};
String[] newsPublisher = {
"중앙","CNN","한국","JTBC","KBS","MBC"
};
%>
<!-- 데이터 이니까 {} 중괄호 있어야됨 -->
{
"count":<%=newsTitle.length %>,
"titles":[
<!-- 일반적인 데이터를 json 형태로 만듬 -->
<%
for(int i=0; i<newsTitle.length;i++) {
out.print("{");
out.print("headline:\""+newsTitle[i] + "\""); /* { 헤드라인 만듬 */
out.print(",");
out.print("publisher:\""+newsPublisher[i] + "\"");
out.print("}");
/* 계속 만드는데 마지막에 , 안오게함 */
if(i!=(newsTitle.length-1)) {
out.print(",");
}
}
%>
]
}
newsTitleJSON2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.news {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: yellow;
color: blue;
border: 1px dashed black;
width: 50%;
}
.newsError {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: orange;
color: red;
border: 1px dashed black;
width: 50%;
}
</style>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function newsTitle() {
// 보냄
sendRequest("newsTitleJSON2_ok.jsp",null,displayNewsTitle,"GET");
}
// 콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// json 데이터 받음
var jsonStr = httpRequest.responseText;
// alert(jsonStr);
// eval은 변수를 javascript의 함수처럼 사용하는 명령어
// 객체화 해서 집어넣는다.
// jsonStr 내용을 객체화 해서 jsonObject에 넣는다.(돔객체로바꿈)
var jsonObject = window.eval('(' + jsonStr + ')');
// alert(jsonObject);
// alert(jsonObject.count); // 객체화 했기때문에 접근할수있다. 6
// alert(jsonObject.titles[2].publisher); // 한국
var count = jsonObject.count;
if(count>0){
var htmlData = "<ol>";
for(var i=0; i<jsonObject.titles.length;i++){
// 데이터 꺼냄
var publisherStr = jsonObject.titles[i].publisher;
var headlineStr = jsonObject.titles[i].headline;
htmlData += "<li>" + headlineStr + " [" +
publisherStr + "]</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("newsDiv");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr/>
<br/>
<div style="width: 50%; margin: 0 auto;">뉴스보기</div>
<div id="newsDiv" class="news"></div>
</body>
</html>