▷ 메모장에 이런식으로 데이터를 작성해서 가져오는 연습을 해보자!
clone_test6_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
// id 값이 btnOk라는 버튼을 눌렀을때 함수를 실행하는 코드
$('#btnOk').on('click', function() {
$.ajax({
type: "get",
url: "json_data2.txt",
dataType: "json"
})
.done(function(data) {
// #resultArea에 table 만들기
$('#resultArea').html('<table border="1"><th width="100">이름</th><th width="100">나이</th><th width="100">아이디</th></table>')
// 반복문(for)을 활용하여 JSON 객체가 파싱된 배열(data)에 접근 후 각 객체 내의 데이터를 테이블에 출력
for(var i=0; i<data.length; i++){
$('#resultArea > table').append(
'<tr>'
+ '<td>' + data[i].name + '</td>'
+ '<td>' + data[i].age + '</td>'
+ '<td>' + data[i].id + '</td>'
+ '</tr>'
);
}
})
.fail(function() {
$('#resultArea').html('<h4>JSON 요청실패!</h4>');
});
});
});
</script>
</head>
<body>
<h1>clone_test6_json.jsp</h1>
<input type="button" value="JSON 파싱" id="btnOk">
<div id="resultArea"></div>
</body>
</html>
출력결과
자바처럼 오류가 눈에 보이지 않기 때문에 오류 찾아내는것이 너무 어렵고 조금 더 신경써서 코드를 작성해야겠다.
'JSP' 카테고리의 다른 글
| JSON (4) - 영화 상세정보 처리[영화진흥위원회 오픈API] (0) | 2022.03.12 |
|---|---|
| JSON (3) - 박스오피스 데이터 가져오기[영화진흥위원회 오픈API] (0) | 2022.03.12 |
| JSON (1) - 기본 사용법 (0) | 2022.03.12 |
| AJAX (4) - blur 이벤트 처리 (0) | 2022.03.09 |
| AJAX (3) - error 처리 (0) | 2022.03.09 |
