본문 바로가기
수업 문제(국비 지원)/JSP

[JSP] 2022.10.21 (서울전체 구 정보, 우편번호)

by byeolsub 2023. 4. 29.

 ❓ test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
<%-- /ajax1/src/main/webapp/test1020/test1.jsp
     
 --%>    
{
  "north":["강북구","노원구","도봉구"],
  "south":["강남구","서초구","관악구"],
  "east":["강동구","송파구","성동구"],
  "west":["강서구","구로구","양천구"]
}

 

  • test1-A.html
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/test0427/test1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>ajax 객체</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
  function loadJson(rtype,tag) { 
	  // 전역 변수(모든 함수에서 사용이 가능한 변수). 함수 내부에 var, let 선언문을 사용하지 않으면 해당 변수는 전역 변수.
	  reqType = rtype;
	  reqTag = tag;
	  ajax("test1.jsp",null,parseJson,"GET")
  }
  function parseJson() {
	  if (this.readyState == 4 && this.status == 200) { //정상 완료
		  listStates(this.responseText)  //서버로 부터 전송 받은 데이터 값
	  } else if(this.readyState == 4 && this.status != 200) { //서버에 오류 발생
		  alert("서버오류"+ this.status)
	  }
  }
  function listStates(data) {
  	   console.log(data);
  	   let jsondata = JSON.parse(data); //json 객체 저장 
  	   let divTag = document.getElementById("result");
  	   if(reqType == 'all')
	          divTag.innerHTML = "서울 전체 구";
	   else
	          divTag.innerHTML = "서울 "+reqType +"쪽 구";
  	   
  	   if(reqTag == 'all') {
  		 let state = ['north','south','east','west']
  		 for (s of state) {
  			 console.log(s)
  	  	     for(let i=0;i<jsondata[s].length;i++) {
  			   divTag.innerHTML += "<br>-"+ jsondata[s][i];
   	         }
  		 }
	   } else {
	     for(let i=0;i<jsondata[reqTag].length;i++) {
			   divTag.innerHTML += "<br>-"+ jsondata[reqTag][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>

 

  • test1-B.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fetch 함수 </title>
<script type="text/javascript">
  function loadJson(rtype,tag) {
		fetch("test1.jsp")  
		.then((r) => r.json())
		.then((jsondata) => {
		  	   let divTag = document.querySelector("#result");
		  	   if(rtype == 'all')
			          divTag.innerHTML = "서울 전체 구";
			   else
			          divTag.innerHTML = "서울 "+rtype +"쪽 구";
		  	   
		  	   if(tag == 'all') {
		  		 let state = ['north','south','east','west']
		  		 for (s of state) {
		  	  	     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>

 

  • test1-C.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax</title>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
function loadJson(rtype,tag) {
  $.ajax("test1.jsp",{
	 success:function(data){
	  	   console.log(data);
	  	   let jsondata = JSON.parse(data); 
	  	   let divTag = document.getElementById("result");
	  	   if(rtype == 'all')
		          divTag.innerHTML = "서울 전체 구";
		   else
		          divTag.innerHTML = "서울 "+rtype +"쪽 구";
	  	   
	  	   if(tag == 'all') {
	  		 let state = ['north','south','east','west']
	  		 for (s of state) {
	  			 console.log(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>

 

 ❓  test2.jsp

<%@ 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":"대전시 중구 금동"}
 ]
}

 

  • test2-A.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 객체</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
  function doJson() {
	ajax("test2.jsp",null,jsonresult,"GET");
  }
  function jsonresult() {
   	  if(this.readyState == 4 && this.status == 200) {
      		resultView(this.responseText)
	  } else if(this.readyState == 4 && this.status != 200) {
		  alert("서버오류"+ this.status)
      }
   }
   function resultView(data) {
	   htmldata = "<br><table border='1'>"
	   +"<tr><th>우편번호</th><th>읍면동</th><th>주소</th></tr>";
      let jsondata = JSON.parse(data); 
      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>

 

  • test2-B.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fetch 함수</title>
<script type="text/javascript">
  function doJson() {
	fetch("test2.jsp")  
	.then((r) => r.json())
	.then((data) => {
	     htmldata = "<br><table border='1'>"
		   +"<tr><th>우편번호</th><th>읍면동</th><th>주소</th></tr>";
	      for(let i=0;i<data.ZIP.length;i++) {
				  let code = data.ZIP[i].zipcode;
				  let dong = data.ZIP[i].dong;
				  let addr = data.ZIP[i].addr;
				  htmldata += "<tr><td>"+code+"</td><td>"
				                    +dong+"</td><td>"+addr+"</td></tr>";
		  }
		  htmldata += "</table>";
		  document.querySelector("#result").innerHTML = htmldata;
	})
  }
  
</script>
</head>
<body>
<input type="button" value="우편번호"   onclick="doJson()"><br>
<div id="result"></div>
</body>
</html>

 

  • test2-C.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax </title>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
  $(function(){  //window.onload 이벤트 같은 기능
     $("input[type=button]").click(function(){ //태그 선택 방식
    	 $.ajax("test2.jsp",{
    		 success:function(data){
   			     htmldata = "<br><table border='1'>"
    				   +"<tr><th>우편번호</th><th>읍면동</th><th>주소</th></tr>";
    			 let jsondata = JSON.parse(data); 
    			 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>";
    			 document.querySelector("#result").innerHTML = htmldata;
    		 }
    	 })
     })	  
  })
</script>
</head>
<body>
<input type="button" value="우편번호" ><br>
<div id="result"></div>
</body>
</html>
 

 

 

저작자표시 비영리 변경금지 (새창열림)

'수업 문제(국비 지원) > JSP' 카테고리의 다른 글

[JSP] 2022.10.26 (삭제 부분 완료하기)  (0) 2023.04.29
[JSP] 2022.10.18 (Test1.java 소스를 실행 했을때 각각 test1결과.txt ProfessorMapper2 인터페이스를 구현하기)  (0) 2023.04.29
[JSP] 2022.10.17 (Test1.java 소스를 실행 했을때 각각 test1결과.text가 나오도록 ProfessorMapper 인터페이스를 구현하기)  (0) 2023.04.29
[JSP] 2022.10.14 (deleteForm.jsp 페이지를 이용하여 게시물 삭제 부분 완성하기)  (0) 2023.04.29
[JSP] 2022.10.13 (dao.boardCount(boardid) : board 테이블의 boardid값에 해당하는 게시물 건수 리턴)  (0) 2023.04.29

관련글

티스토리툴바