HTML_JS(Sol)/jQuery_Ajax
210618_1(jQuery_ajax_json)
너굴셉
2021. 6. 18. 17:42
json
javascript object notation : 데이터 포맷 방법
JSON은 속성-값 쌍 또는 "키-값"쌍으로 이루어진 데아터 오브젝트를
전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는
개방형 표준 포맷이다. 비동기 브라우저/서버 통신을 위해,
넓게는 XML을 대체하는 주요 데이터 포맷이다.
활용법
1. { 로 시작하고 } 로 끝난다.
2. { } 안에 키 : 밸류 로 지정한다
3. 키 : 밸류가 반복되면 , 쉼표로 구별한다.
밸류가 반복 되는 구조는 k : [v, v, v, v,]형태가 된다.
4. 같은 키 : 밸류 가 반복되는 { }들은 , 쉼표 구별하여 [ ] 로 감싼다. ===> k : [{k:v},{k:v},{k:v}]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>json(1)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
$("#mybtn").click(function(){
$.ajax({
url : "ajax/json/04.json",
type : "get",
dataType : "json",
cache : false,
timeout : 30000,
success : function(json){
//파라미터로 전달되는 객체는 JSON 자체이다.
var title = json.school.subject.title;
var time = json.school.subjecttime;
var teacher = json.school.subject.teacher;
/** 요소의 동적 생성 및 데이터 출력구현*/
var ul = $("<div>");
var li1 = $("<p>").html(title);
var li2 = $("<p>").html(time);
var li3 = $("<p>").html(teacher);
$("#result").append(ul.append(li1).append(li2).append(li3));
},
error: function(xhr, textStatus, errorThrown){
$("div").html("<div>" + textStatus + " (HTTP-" + xhr.state + " / " + errorThrown + ")</div>" );
}
});
});
})
</script>
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 JSON데이터 읽기 (1)</h1>
<div class="exec">
<input type="button" value="JSON데이터 가져오기" id="mybtn"/>
</div>
<div class="console" id="result"></div>
</body>
</html>jason
{
"school": {
"subject": {
"title": "Javascript+jQuery+Ajax",
"time": "매주 월/수/금 오후 7시30분~10시20분",
"teacher": "주영아"
}
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>json(2)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
$("#mybtn").click(function(){
$.ajax({
url : "ajax/json/05.json",
type : "get",
dataType : "json",
cache : false,
timeout : 30000,
success : function(json) {
//배열까지 접근한다.
var subject = json.school.subject;
//배열의 길이 만큼 반복문 처리한다.
for(var i=0; i<subject.length; i++){
//반복처리 안에서 i 번째 요소는 JSON데이터 자체이다.
var title = subject[i].title;
var time = subject[i].time;
var teacher = subject[i].teacher;
/** 결과를 출력하기 위한 동적 요소의 생성 */
var ul = $("<div>");
var li1 = $("<p>").html(title);
var li2 = $("<p>").html(time);
var li3 = $("<p>").html(teacher);
ul.append(li1).append(li2).append(li3);
$("#result").append(ul);
$("#result").append("<hr />")
}; //for문의 끝
},
error: function(xhr, textStatus, errorThrown){
$("div").html("<div>" + textStatus + " (HTTP-" + xhr.state + " / " + errorThrown + ")</div>" );
}
});
});
});
</script>
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 JSON데이터 읽기 (2)</h1>
<div class="exec">
<input type="button" value="JSON 데이터 가져오기" id="mybtn"/>
</div>
<div class="console" id="result"></div>
</body>
</html>{
"school": {
"subject": [
{
"title": "Javascript+jQuery+Ajax",
"time": "매주 월/수/금 오후 7시30분~10시20분",
"teacher": "주영아"
},
{
"title": "HTML5+CSS3 기반의 반응형 웹",
"time": "매주 화/목 오후 7시30분~10시20분",
"teacher": "주영아"
},
{
"title": "Java 입문에서 활용까지",
"time": "매주 화/목 오후 7시30분~10시20분",
"teacher": "이광호"
}
]
}
}
셀렉터
div.exec:eq(0) div태그중에 exec라는 클래스중에 첫번째
div.exec:eq(1) div태그중에 exec라는 클래스중에 두번째
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>article</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- plugin 참조 -->
<script type="text/javascript" src="plugins/tmpl/jquery.tmpl.min.js"></script>
<style type="text/css">
table {
display: block;
width: 100%;
font-size: 14px;
text-align: center;
}
table tr:after {
content: '';
display: block;
float: none;
clear: both;
}
table .left {
text-align: left;
}
thead, tbody, tr {
display: block;
width: 100%;
}
td, th {
display: block;
float: left;
padding: 10px 0;
}
table thead {
border-bottom: solid 2px #285E8E;
font-weight: bold;
}
table tbody tr {
border-bottom: 1px dotted #ccc;
}
.example table .no {
width: 10%;
}
.example table .subject {
width: 60%;
}
.example table .hit {
width: 10%;
}
.example table .date {
width: 20%;
}
</style>
<!-- 템플릿으로 사용할 HTML태그 -->
<script id="itemTemplate" type="text/x-jquery-tmpl">
<tr>
<td class="no">${no}</td>
<td class="left subject">${subject}</td>
<td class="hit">${hit}</td>
<td class="date">${date}</td>
</tr>
</script>
<!--// 템플릿 끝 -->
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
/**get방식으로 json데이터의 요청*/
$.get("ajax/json/bbs.jsp", {}, function(json){
//결과가 전달되는 파라미터에 읽어온 데이터가 담겨 있으며,
//JSON이므로 별도의 추출 과정 없이 점(.)으로 데이터 계층을 연결하여 사용할 수 있다.
/**제목, 내용, 천제 글 수를 화면에 출력*/
$("h1.title").html(json.title);
$("div.exec:eq(0)").html(json.description);
$("div.exec:eq(1) > span").html(json.total);
//글 항목을 담고 있는 배열을 템플릿에 통채로 지정
var tmpl = $("#itemTemplate").tmpl(json.item);
//화면에 출력
$("div.example > table > tbody").append(tmpl);
});
});
</script>
</head>
<body>
<!--게시판 제목이 출력될 곳-->
<h1 class="title"></h1>
<!-- 게시판 설명이 출력될 곳-->
<div class="exec"></div>
<div class="exec">
<!--게시물 수 출력될 곳 -->
총 게시물 수 : <span></span>개
</div>
<div class="example">
<table>
<thead>
<tr>
<th class="no">번호</th>
<th class="subject">제목</th>
<th class="hit">조회수</th>
<th class="date">작성일시</th>
</tr>
</thead>
<tbody>
<!--목록이 출력될 곳 -->
</tbody>
</table>
</div>
</body>
</html>{
"title": "Javascript + jQuery + Ajax 완벽가이드",
"description": "그린IT학원에서 진행중인 Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
"total": 4,
"item": [
{
"no": "공지",
"subject": "'Javascript + jQuery + Ajax 완벽가이드' 강의 자료실 입니다.",
"hit": 3,
"date": "2013.10.29"
}, {
"no": 3,
"subject": "Javascript + jQuery + Ajax 완벽가이드 3일차 강의자료 입니다.",
"hit": 6,
"date": "2013.11.08"
}, {
"no": 2,
"subject": "Javascript + jQuery + Ajax 완벽가이드 2일차 강의자료 입니다.",
"hit": 15,
"date": "2013.11.07"
}, {
"no": 1,
"subject": "Javascript + jQuery + Ajax 완벽가이드 1일차 강의자료 입니다.",
"hit": 19,
"date": "2013.11.05"
}
]
}<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" import="java.sql.*" %>
<%
/*
create table bookboard (
no int(7) auto_increment primary key,
subject varchar(30),
hit int(5),
date datetime
) engine=innodb default charset='uft-8';
insert into bookboard values (null, '제목1',0,now());
insert into bookboard values (null, '제목2',10,now());
insert into bookboard values (null, '제목3',20,now());
insert into bookboard values (null, '제목4',30,now());
insert into bookboard values (null, '제목5',40,now());
*/
String message="";
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://localhost:3306/jspdb?useUnicode=true&characterEncoding=euckr";
String user = "jspuser";
String pswd = "1234";
Connection conn = DriverManager.getConnection(url,user, pswd);
Statement stmt = conn.createStatement();
String sql = " select count(*) from bookboard ";
ResultSet rs = stmt.executeQuery(sql);
int count = 0;
if (rs.next()) count = rs.getInt(1);
sql = " select no,subject,hit,date from bookboard ";
rs = stmt.executeQuery(sql);
int no = 0;
String subject = "";
int hit = 0;
String date = "";
%>
{
"title": "Javascript + jQuery + Ajax 완벽가이드",
"description": "솔데스크에서 진행중인 Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
"total": <%=count%>,
"item": [
<%
int cnt = 0;
String comma = "";
while (rs.next()) {
no = rs.getInt("no");
subject = rs.getString("subject");
hit = rs.getInt("hit");
date = rs.getString("date");
if(cnt< count-1) comma="," ;
else comma="";
%>
<%= "{ \"no\": "+no+"," %>
<%="\"subject\": \""+subject+"\"," %>
<%="\"hit\":"+hit+"," %>
<%="\"date\" : \""+date+"\"}"+comma+"" %>
<%
cnt++;
}
%>
]
}
<%
rs.close();
stmt.close();
conn.close();
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>json(1)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript">
var ju ={
"name" : "주영아",
"age" : 19,
"gender" : "여자",
"visual" : "이쁨"
};
document.write("<h1>" + ju.name +"</h1>");
document.write("<h1>" + ju.age +"</h1>");
document.write("<h1>" + ju.gender +"</h1>");
document.write("<h1>" + ju.visual +"</h1>");
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>json(2)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript">
function initCompany(){
//회사 정보를 표현하는 데이터 구조를 JSON으로 정의
// 하나의 JSON 데이터 안에는 일반 변수와 배열 데이터가 공존할 수 있다.
var company = {
"name" : "(주)굿모닝컴퍼니",
"since" : 2013,
"department" : ["기획팀", "영업팀", "디자인팀", "개발팀"],
"biz" : ["소프트웨어개발", "통신판매업", "위치정보서비스"]
};
//회사이름 출력하기
document.getElementById("name").innerHTML = company.name;
//설립년도 출력하기
document.getElementById("since").innerHTML = company.since;
//주요 사업 부서를 출력하기 위하여 배열을 반복문으로 읽는다.
var dept_li="";
for(var i=0; i<company.department.length; i++){
dept_li += "<li>"+company.department[i]+"</li>";
}
document.getElementById("department").innerHTML = dept_li;
//주요 사업 분야를 출력하기 위하여 배열을 반복문으로 읽는다.
var biz_li="";
for(var i=0; i<company.biz.length; i++){
biz_li += "<li>" + company.biz[i] + "</li>";
}
document.getElementById("biz").innerHTML = biz_li;
}
</script>
</head>
<body onload="initCompany()">
<h1 id="name"></h1>
<p>
<strong>설립년도 :</strong><span id="since"></span>
</p>
<h2>주요 사업 부서</h2>
<ul id="department"></ul>
<h2>주요 사엽 분야</h2>
<ul id="biz"></ul>
</body>
</html>
