데이터 가져올 때 JSON 방식으로 가져온다.
Folder: 03_json
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</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>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
JSON 객체
{
변수: 값, 변수: 값, . . .
}
JSON 배열
{
[
{ 변수: 값, 변수: 값, ..},
{ 변수: 값, 변수: 값, ..}
]
}
json01.json
{
"school" : {
"subject" : {
"title": "Javascript+jQuery+Ajax",
"time": "매주 월/수/금 오후 7시00분~10시00분",
"teacher": "홍길동"
}
}
}
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../json/json01.json',
dataType: 'json', //서버로부터 반환되는 데이터 타입
success: function(data){
console.log(JSON.stringify(data));
},
error: function(e){
console.log(e);
}
});
});
});
</script>
let title = data.school.subject.title;
let time = data.school.subject.time;
let teacher = data.school.subject.teacher;
let div = $('<div/>');
let p1 = $('<p/>').html(title);
let p2 = $('<p/>').html(time);
let p3 = $('<p/>').html(teacher);
//메소드 체인
div.append(p1).append(p2).append(p3);
//div를 id="result"에 붙이기
$('#result').append(div);
백틱 방법으로 쓴 코드
let div = `<div>` +
`<p>` + title + `</p>` +
`<p>` + time + `</p>` +
`<p>` + teacher + `</p>` +
`</div>`
//div를 id="result"에 붙이기
$('#result').append(div); let div = `<div>` +
`<p>${title}</p>` +
`<p>${time}</p>` +
`<p>${teacher}</p>` +
`</div>`
//div를 id="result"에 붙이기
$('#result').append(div);exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</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>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../json/json02.json',
dataType: 'json',
success: function(data){
console.log(JSON.stringify(data));
},
error: function(e){
console.log(e);
}
});
});
});
</script>
</body>
</html>{
"school": {
"subject": [
{
"title": "Javascript+jQuery+Ajax",
"time": "매주 월/수/금 오후 7시00분~10시00분",
"teacher": "홍길동"
},{
"title": "HTML5+CSS3 기반의 반응형 웹",
"time": "매주 화/목 오후 7시00분~10시00분",
"teacher": "네오"
},{
"title": "Java 입문에서 활용까지",
"time": "매주 화/목 오후 7시00분~10시00분",
"teacher": "프로도"
}
]
}
}
let subject = data.school.subject;
let teacher = subject[0].teacher; //홍길동
console.log(subject);
console.log(teacher);
반복문 돌리기
let subject = data.school.subject;
for(let i=0; i<subject.length; i++){
let div = `<div>` +
`<p>${data.school.subject[i].title}</p>` +
`<p>${data.school.subject[i].time}</p>` +
`<p>${data.school.subject[i].teacher}</p>` +
`</div>`;
//div를 id="result"에 붙이기
$('#result').append(div).append('<br/>');
}
$.each(data.school.subject, function(index, items){
let div = `<div>` +
`<p>${items.title}</p>` +
`<p>${items.time}</p>` +
`<p>${items.teacher}</p>` +
`</div>`;
//div를 id="result"에 붙이기
$('#result').append(div).append('<br/>');
});//$.each()
Template 플러그인과의 연계
- Template 플러그인은 동적으로 생성하고자 하는 요소를 미리 HTML 틀을 정의해 둔 후,
그 안의 적용할 내용을 JSON 데이터로 처리하는 jQuery 플러그인이다.
- Ajax를 사용하면 원격지의 JSON 데이터를 페이지 이동 없이 로드 해 올 수 있다.
- 이때 Ajax로 로드한 JSON 데이터의 구조와 템플릿에 정의되어있는 치환자들이 동일하다면,
바로 데이터를 전달받아 동적 요소를 생성하여 화면에 출력하도록 구성할 수 있다.
- 사이트 : https://github.com/BorisMoore/jquery-tmpl
=> jquery-tmpl-master.zip 다운로드 받기
=> jquery.tmpl.min.js를 사용하면 된다.
=> 플러그인 참조 코드 추가<script type="text/javascript" src="../json/jquery.tmpl.min.js"></script>
예)
{"message" : "Hello Ajax"}
↓
$.get("data.json", {파라미터}, function(data) {
var temp = $("#itemTemplate").tmpl(data);
$("출력할 요소 CSS셀렉터").append(temp);
}, ["json"]);
↓
<script id="itemTemplate" type="text/x-jquery-teml">
<h1>${message}</h1>
</script>
주의사항=> JSP 파일에서 작업을 하면 EL표현식과 충돌이 난다.
<script id="itemTemplate" type="text/x-jquery-teml"><h1>${message}</h1></script>
=> 그래서 JSP 파일에서는 반드시 ""를 붙여서 사용을 해야 한다.
<script id="itemTemplate" type="text/x-jquery-teml"><h1>${message}</h1></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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>
</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>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
붕어빵 틀 만들어놓은 거
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.tmpl.min.js"></script>
<!-- 템플릿으로 사용할 HTML 태그(붕어빵 틀 제조) -->
<script type="text/javascript" id="itemTemplate">/* 붕어빵 이름 잡아주기 */
<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">bbs.json
{
"title": "Javascript + jQuery + Ajax 완벽가이드",
"description": "Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
"total": 4,
"item": [
{
"no": "공지",
"subject": "'Javascript + jQuery + Ajax 완벽가이드' 강의 자료실 입니다.",
"hit": 3,
"date": "2018.01.29"
},{
"no": 3,
"subject": "Javascript + jQuery + Ajax 완벽가이드 3일차 강의자료 입니다.",
"hit": 6,
"date": "2018.02.08"
},{
"no": 2,
"subject": "Javascript + jQuery + Ajax 완벽가이드 2일차 강의자료 입니다.",
"hit": 15,
"date": "2018.02.07"
},{
"no": 1,
"subject": "Javascript + jQuery + Ajax 완벽가이드 1일차 강의자료 입니다.",
"hit": 19,
"date": "2018.02.05"
}
]
}<script type="text/javascript">
$(function () {
$.ajax({
type: 'get',
url: '../json/bbs.json',
dataType: 'json',
success: function(data){
$('.title').html(data.title);
$('.exec:eq(0)').html(data.description);
$('.exec:eq(1) span').html(data.total);
$.each(data.item, function(index, items){
let tr = `<tr>
<td>${items.no}</td>
<td>${items.subject}</td>
<td>${items.hit}</td>
<td>${items.date}</td>
</tr>`;
$('tbody').append(tr);
});
},
error: function(e){
console.log(e);
}
});
});
</script>
//item 배열을 템플릿에 통째로 저장
let tmpl = $('#itemTemplate').tmpl(data.item);
//화면에 출력
$('tbody').append(tmpl);
반응형
Fodler: bootstrap
bootstrap.html
BootStrap 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">버튼 생성</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
<div class="card" style="width: 18rem;">
<img src="../image/짱구.jpg" class="card-img-top" alt="짱구">
<div class="card-body">
<h5 class="card-title">짱구</h5>
<p class="card-text">짱구 귀엽다. 짱구의 친구들은 철수, 훈이, 유리, 맹구가 있다.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../image/1.jpg" class="d-block w-100" alt="단체사진1">
</div>
<div class="carousel-item">
<img src="../image/2.jpg" class="d-block w-100" alt="단체사진2">
</div>
<div class="carousel-item">
<img src="../image/3.jpg" class="d-block w-100" alt="단체사진3">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span
class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="visually-hidden">Next</span>
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
'HTML CSS JS' 카테고리의 다른 글
| DAY 41 - JSON / Bootstrap (2024.08.29) (0) | 2024.08.29 |
|---|---|
| DAY 40 - jQueryAJax (2024.08.28) (3) | 2024.08.28 |
| DAY 39 - jQuery / jQueryAJax (2024.08.27) (0) | 2024.08.27 |
| DAY 38 - jQuery (2024.08.26) (0) | 2024.08.26 |
| DAY 37 - jQuery (2024.08.23) (0) | 2024.08.23 |
