JSON의 자료형 사용 실습
이번에는 JSON 자료형을 실제로 사용하여 값을 출력하는 예제를 실습해 보겠습니다.
1. 다음과 같이 test04 폴더를 만들고 json1~4까지 jsp 파일을 생성합니다.
2. json1.jsp를 다음과 같이 작성합니다. JSON 배열에 문자열을 저장한 후 웹 페이지에 출력하는 내용입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#checkJson").click(function() {
var jsonStr = '{"name": ["홍길동", "이순신", "임꺽정"] }';
var jsonInfo = JSON.parse(jsonStr);
var output ="회원 이름<br>";
output += "=======<br>";
for(var i in jsonInfo.name) {
output += jsonInfo.name[i]+"<br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
2. http://localhost:8080/pro16/test04/json1.jsp로 요청하여 출력을 클릭하면 배열 요소의 값을 출력합니다.
4. 이번에는 정수 자료형을 배열로 저장한 후 화면에 출력해 보겠습니다. json2.jsp를 다음과 같이 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#checkJson").click(function() {
var jsonStr = '{"age": [22, 33, 44]}';
var jsonInfo = JSON.parse(jsonStr);
var output ="회원 나이<br>";
output += "=======<br>";
for(var i in jsonInfo.age) {
output += jsonInfo.age[i]+"<br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
5. http://localhost:8080/pro16/test04/json2.jsp로 요청한 후 출력을 클릭하여 결과를 확인합니다.
6. 이번에는 JSON 객체에 회원 정보를 작성한후 다시 회원 정보를 출력해 보겠습니다. json3.jsp를 다음과 같이 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#checkJson").click(function() {
var jsonStr = '{"name":"박지성","age":25,"gender":"남자","nickname":"날센돌이"}';
var jsonObj = JSON.parse(jsonStr);
var output ="회원 정보<br>";
output += "=======<br>";
output += "이름: " + jsonObj.name+"<br>";
output += "나이: " + jsonObj.age+"<br>";
output += "성별: " + jsonObj.gender+"<br>";
output += "별명: " + jsonObj.nickname+"<br>";
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
7. http://localhost:8080/pro16/test04/json3.hsp로 요청하여 실행 결과를 확인합니다.
8. 마지막으로 이번에는 JSON 배열의 요소에 JSON 객체를 지정한 후 다시 배열에 접근하여 JSON 객체의 속성 값을 출력해보겠습니다. json4.jsp를 다음과 같이 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#checkJson").click(function() {
var jsonStr = '{"members":[{"name":"박지성","age":"25","gender":"남자","nickname":"날센돌이"}'
+', {"name":"손흥민","age":"30","gender":"남자","nickname":"탱크"}] }';
var jsonInfo = JSON.parse(jsonStr);
var output ="회원 정보<br>";
output += "=======<br>";
for(var i in jsonInfo.members){
output += "이름: " + jsonInfo.members[i].name+"<br>";
output += "나이: " + jsonInfo.members[i].age+"<br>";
output += "성별: " + jsonInfo.members[i].gender+"<br>";
output += "별명: " +jsonInfo.members[i].nickname+"<br><br><br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
9. 다음은 실행 결과입니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 회원 정보 조회 기능 구현 (0) | 2026.06.05 |
|---|---|
| Ajax 이용해 서버와 JSON 데이터 주고받기 (0) | 2026.06.02 |
| 제이쿼리에서 JSON 사용하기 (0) | 2026.05.27 |
| ID 중복 여부 확인하기 (0) | 2026.05.24 |
| XML 데이터 연동하기 (0) | 2026.05.21 |