728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우편번호 보기</title>
<script type="text/javascript" src="../ajax/ajax.js"></script>
<script type="text/javascript">
function doJson() {
sendRequest("test2.jsp",null,jsonresult,"GET");
}
function jsonresult() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
resultView();
}
}
}
function resultView() {
htmldata = "<br><table border='1'>"
+"<tr><th>우편번호</th><th>읍면동</th><th>주소</th></tr>";
let jsondata = JSON.parse(ajax.responseText);
for(let i=0;i<jsondata.ZIP.length;i++) {
let code = jsondata.ZIP[i].zipcode;
let dong = jsondata.ZIP[i].dong;
let addr = jsondata.ZIP[i].addr;
htmldata += "<tr><td>"+code+"</td><td>"
+dong+"</td><td>"+addr+"</td></tr>";
}
htmldata += "</table>";
result.innerHTML = htmldata;
}
</script>
</head>
<body>
<input type="button" value="우편번호" onclick="doJson()"><br>
<div id="result"></div>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
{
"ZIP": [
{"zipcode" : 400160, "dong":"경동", "addr":"인천시 중구 경동"},
{"zipcode" : 600030, "dong":"광복동", "addr":"부산시 중구 광복동"},
{"zipcode" : 100411, "dong":"광희동1가", "addr":"서울시 중구 광희동1가"},
{"zipcode" : 681240, "dong":"교동", "addr":"울산시 중구 교동"},
{"zipcode" : 301300, "dong":"수동", "addr":"부산시 중구 수동"},
{"zipcode" : 301233, "dong":"금동", "addr":"대전시 중구 금동"}
]
}728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 23. jquery xml 예제1 (서울 구 보기) (0) | 2022.04.27 |
|---|---|
| [Jquery] 21. Jquery slideimg (setInterval) (0) | 2022.04.26 |
| [Jquery] 21. Jquery animate2 (id값주기) (0) | 2022.04.26 |
| [Jquery] 21. Jquery animate1 (animate) (0) | 2022.04.26 |
| [Jquery] 21. Jquery game (그림 맞추기 게임만들기) (0) | 2022.04.25 |