728x90
반응형
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/test0427/test1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>XML 예제</title>
<script type="text/javascript" src="../ajax/ajax.js"></script>
<script type="text/javascript">
function loadJson(rtype,tag) {
reqType = rtype;
reqTag = tag;
sendRequest("test1.jsp",null,parseJson,"GET")
}
function parseJson() {
if (ajax.readyState == 4) {
if(ajax.status == 200) {
listStates()
} else {
alert("서버오류"+ ajax.status)
}
}
}
function listStates() {
console.log(ajax.responseText);
let data = ajax.responseText;
let jsondata = JSON.parse(data);
let divTag = document.getElementById("result");
if(reqType == 'all')
divTag.innerHTML = "서울 전체 구";
else
divTag.innerHTML = "서울 "+reqType +"쪽 구";
if(reqTag == 'all' || reqTag == 'north') {
for(var i=0;i<jsondata.north.length;i++) {
divTag.innerHTML += "<br>-"+ jsondata.north[i];
}
}
if(reqTag == 'all' || reqTag == 'south') {
for(var i=0;i<jsondata.south.length;i++) {
divTag.innerHTML += "<br>-"+ jsondata.south[i];
}
}
if(reqTag == 'all' || reqTag == 'east') {
for(var i=0;i<jsondata.east.length;i++) {
divTag.innerHTML += "<br>-"+ jsondata.east[i];
}
}
if(reqTag == 'all' || reqTag == 'west') {
for(var i=0;i<jsondata.west.length;i++) {
divTag.innerHTML += "<br>-"+ jsondata.west[i];
}
}
}
</script></head><body>
<h1>서울의 구 정보</h1>
<input type="button" value="서울 전체 구" onclick="loadJson('all','all')">
<input type="button" value="서울 동쪽 구" onclick="loadJson('동','east')">
<input type="button" value="서울 서쪽 구" onclick="loadJson('서','west')">
<input type="button" value="서울 남쪽 구" onclick="loadJson('남','south')">
<input type="button" value="서울 북쪽 구" onclick="loadJson('북','north')">
<div id="result"></div>
<div id="result"></div>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--/jquery1/src/main/webapp/test0427/test1.jsp --%>
{
"north":["강북구","노원구","도봉구"],
"south":["강남구","서초구","관악구"],
"east":["강동구","송파구","성동구"],
"west":["강서구","구로구","양천구"]
}728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 23. jquery xml 예제2 (우편번호 보기) (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 |