-
2022년 10월 24일개발/개발일지(국비지원) 2022. 10. 24. 22:41728x90
ajax 부분을 예제를 통해 마무리지었다.
서울전체구, 서울 동쪽 구 , 서울 서쪽 구 , 서울 남쪽 구 , 서울 북쪽 구 라는 value를 가진
button을 클릭했을때 각각에 위치한 구 들을 출력하도록
기본적인ajax.js 이용 , fetch함수이용, jquery이용 하여
3가지방식으로 ajax를 구현했다.
function loadJson(rtype,tag) { 1) loadJson button이 클릭되면
fetch("test1.jsp")
.then((r) => r.json())
.then((jsondata) => { 2) test1.jsp 객체를 응답받는다.
let divTag = document.querySelector("#result"); 3)divTag = 버튼을눌렀을때 출력될곳을 의미.
if(rtype == 'all') 4)만약 버튼이 all, 서울전체구가 클릭됐으면
divTag.innerHTML = "서울 전체 구"; 5)divTag에 서울 전체 구 출력
else 4-2)버튼이 전체구가아니면 "서울 + 동~북 + "쪽 구" 출력
divTag.innerHTML = "서울 "+rtype +"쪽 구";
if(tag == 'all') { 6)만약 tag= "all"이면
let state = ['north','south','east','west'] 7)state객체에는 north,south,east,west 객체들의 모든배열이 대입
for (s of state) { 8)s에는 객체들의 모든배열이 담김.
for(let i=0;i<jsondata[s].length;i++) {
divTag.innerHTML += "<br>-"+ jsondata[s][i];
}
}
} else {
for(let i=0;i<jsondata[tag].length;i++) {
divTag.innerHTML += "<br>-"+ jsondata[tag][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>
</body>
</html>2번째방법인 fetch함수를 이용한 예제를 통해 학습을하였다.
ajax부분을 이렇게 마무리짓고
spring 부분 기본설정을 마치면서 수업을 마쳤다.
jsp를 시작으로 model1 , model2 방식을 거쳐 mybatis , ajax까지 마무리를지었는데
아직까지도 익숙하지않고 이해가지않는 부분은많아, 꾸준히 복습을해야할것같다.
728x90'개발 > 개발일지(국비지원)' 카테고리의 다른 글
2022년 10월 30일 기초복습2(jsp-1) (0) 2022.10.30 2022년 10월 30일 기초복습(html/css) (0) 2022.10.30 2022년 10월 20일 수업내용 (0) 2022.10.20 2022년 10월 19일 수업내용. (0) 2022.10.19 2022년 10월 13일 용어정리 (1) 2022.10.13