오늘이라도

[Web] 25. ajax 통신을 이용한 json 출력 / xml 출력 / jsp 접근 본문

취업성공패키지 SW 개발자 교육/Web

[Web] 25. ajax 통신을 이용한 json 출력 / xml 출력 / jsp 접근

upcake_ 2020. 6. 11. 09:32
반응형

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

 - ajax 통신을 이용한 json 출력 -

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test jQuery02</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(){
		$.ajax({
			dataType : "json",
			url : "gjbus.jsp",
			success : function(data){ resultHtml(data); },
			error : function(){ alert("로딩실패!"); }
		});
	});
});

function resultHtml(data){
	var html = "<table border = '1'>";
	html += "<tr>";
	html += "<th>노선번호</th>";
	html += "<th>출발지</th>";
	html += "<th>도착지</th>";
	html += "<th>첫차</th>";
	html += "<th>막차</th>";
	html += "<th>운행간격</th>";
	html += "<th>노선종류</th>";
	html += "</tr>";
	
	$.each(data, function(key, value){
		html += "<tr align = 'center'>";
		html += "<td>" + value.LINE_NAME + "</td>";
		html += "<td>" + value.DIR_UP_NAME + "</td>";
		html += "<td>" + value.DIR_DOWN_NAME + "</td>";
		html += "<td>" + value.FIRST_RUN_TIME + "</td>";
		html += "<td>" + value.LAST_RUN_TIME + "</td>";
		html += "<td>" + value.RUN_INTERVAL + "</td>";
		if(value.LINE_KIND == 1){
			html += "<td>급행간선</td>";
		}else if(value.LINE_KIND == 2){
			html += "<td>간선</td>";
		}else if(value.LINE_KIND == 3){
			html += "<td>지선</td>";
		}else if(value.LINE_KIND == 4){
			html += "<td>마을버스</td>";
		}		
		html += "</tr>";
	});
	
	
	html += "</table>";
	$("#display").empty();
	$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">광주광역시 버스 노선정보</button>
<br/><br/>
<div id="display">
여기에 버스 노선정보가 출력됩니다.
</div>
</body>
</html>

<!-- 
1. allow control allow origin 검색
2. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf 접속
3. 크롬에 추가
4. 주소표시줄 오른쪽 상단의 C: 아이콘 클릭 > 활성화
 -->

▲test02_jq05~11.html : 방법 ①

  - jsp를 통해서 json 파일을 만든 뒤 읽어오는 방법

  - 번거롭지만 CORS 오류가 발생하지 않는다는 장점이 있다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test jQuery03</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(){
		$.ajax({
			dataType : "json",
			url : "http://api.gwangju.go.kr/json/lineInfo",
			success : function(data){ resultHtml(data); },
			error : function(){ alert("로딩실패!"); }
		});
	});
});

function resultHtml(data){
	var html = "<table border = '1'>";
	html += "<tr>";
	html += "<th>노선번호</th>";
	html += "<th>출발지</th>";
	html += "<th>도착지</th>";
	html += "<th>첫차</th>";
	html += "<th>막차</th>";
	html += "<th>운행간격</th>";
	html += "<th>노선종류</th>";
	html += "</tr>";
	
	$.each(data, function(key, value){
		if(key == "LINE_LIST"){
			$.each(value, function(key, value){
				html += "<tr align = 'center'>";
				html += "<td>" + value.LINE_NAME + "</td>";
				html += "<td>" + value.DIR_UP_NAME + "</td>";
				html += "<td>" + value.DIR_DOWN_NAME + "</td>";
				html += "<td>" + value.FIRST_RUN_TIME + "</td>";
				html += "<td>" + value.LAST_RUN_TIME + "</td>";
				html += "<td>" + value.RUN_INTERVAL + "</td>";
				if(value.LINE_KIND == 1){
					html += "<td>급행간선</td>";
				}else if(value.LINE_KIND == 2){
					html += "<td>간선</td>";
				}else if(value.LINE_KIND == 3){
					html += "<td>지선</td>";
				}else if(value.LINE_KIND == 4){
					html += "<td>마을버스</td>";
				}				
				html += "</tr>";
			});
		}
	});
	
	
	html += "</table>";
	$("#display").empty();
	$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">광주광역시 버스 노선정보</button>
<br/><br/>
<div id="display">
여기에 버스 노선정보가 출력됩니다.
</div>
</body>
</html>

<!-- 
1. allow control allow origin 검색
2. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf 접속
3. 크롬에 추가
4. 주소표시줄 오른쪽 상단의 C: 아이콘 클릭 > 활성화
 -->

▲test03_jq05~11.html : 방법 ②

 - 공공 API JSON에 바로 접근해서 뿌리는 방법

 

<%@ page import="net.htmlparser.jericho.Source"%>
<%@ page import="com.hanul.study.GjBusDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
GjBusDAO dao = new GjBusDAO();
Source source = dao.makeJson();
String data = source.toString();
int beginIndex = data.indexOf("[");
int endIndex = data.indexOf("]");
data = data.substring(beginIndex, endIndex + 1);
%>
<%=data %>

▲gjbus.jsp

 

package com.hanul.study;

import java.net.URL;

import net.htmlparser.jericho.Source;

public class GjBusDAO {
	public Source makeJson() {
		Source source = null;
		try {
			String juso = "http://api.gwangju.go.kr/json/lineInfo";
			URL url = new URL(juso);
			source = new Source(url);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return source;
	}
}

▲GjBusDAO.java

 

 

 - ajax 통신을 이용한 xml 출력 -

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 12</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function() {
		$.ajax({
			dataType : "xml",
			url : "imageList.xml",
			success : function(data){ resultHtml(data); },
			error : function(){ alert("에러 발생"); }
		}); //ajax()
	}); //click()
}); //ready()

function resultHtml(data) {
	var images = $(data).find("img"); //find() 메서드로 XML의 키 값을 찾는다.
	//console.log(images.length);	//9
	var html = "";
	for(var i = 0; i < images.length; i++) {
		var imgPath = images.eq(i);
		//console.log(imgPath.text()); //images/apple1.jpg ~ images/pear3.jpg 까지 출력
		html += "<img src = '" + imgPath.text() + "' width='150' height='150' /><br />";
		//console.log(html);
	}
	$("#display").empty();
	$("#display").append(html);
	//$("#display").html(html);
}
</script>
</head>
<body>
<button id="btn">이미지 보기</button>
<br/><br/>
<div id="display">
	이미지가 출력되는 영역
</div>
</body>
</html>

▲jq12_ajax_xml.html

 

<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item>
		<img>images/apple1.jpg</img>
	</item>
	<!-- 태그를 하나만 만들어두면 자동완성으로 지원이 된다 -->
	
	<item>
		<img>images/apple2.jpg</img>
	</item>
	
	<item>
		<img>images/apple3.jpg</img>
	</item>
	
	<item>
		<img>images/banana1.jpg</img>
	</item>
	
	<item>
		<img>images/banana2.jpg</img>
	</item>
	
	<item>
		<img>images/banana3.jpg</img>
	</item>
	
	<item>
		<img>images/pear1.jpg</img>
	</item>
	
	<item>
		<img>images/pear2.jpg</img>
	</item>
	
	<item>
		<img>images/pear3.jpg</img>
	</item>
</items>

▲imageList.xml

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test jQuery04</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(){
		$.ajax({
			dataType : "xml",
			url : "http://api.gwangju.go.kr/xml/lineInfo",
			success : function(data){ resultHtml(data); },
			error : function(){ alert("에러발생"); }
		});	//ajax()
	});	//click()
});	//ready()

function resultHtml(data){
	var html = "<table border = '1'>";
	html += "<tr>";
	html += "<th>노선번호</th>";
	html += "<th>출발지</th>";
	html += "<th>도착지</th>";
	html += "<th>첫차</th>";
	html += "<th>막차</th>";
	html += "<th>운행간격</th>";
	html += "<th>노선종류</th>";
	html += "</tr>";
	
	var ROW_COUNT = $(data).find("ROW_COUNT").text();
	//alert(ROW_COUNT);
	var LINE = $(data).find("LINE");
	//alert(LINE.text());
	var BusInfo = "";
	
	for(var i = 0; i < ROW_COUNT; i++){
		BusInfo = LINE.eq(i);
		html += "<tr align = 'center'>";
		html += "<td>" + BusInfo.find("LINE_NAME").text() + "</td>";
		html += "<td>" + BusInfo.find("DIR_UP_NAME").text() + "</td>";
		html += "<td>" + BusInfo.find("DIR_DOWN_NAME").text() + "</td>";
		html += "<td>" + BusInfo.find("FIRST_RUN_TIME").text() + "</td>";
		html += "<td>" + BusInfo.find("LAST_RUN_TIME").text() + "</td>";
		html += "<td>" + BusInfo.find("RUN_INTERVAL").text() + "</td>";
		if(BusInfo.find("LINE_KIND").text() == 1){
			html += "<td>급행간선</td>";
		}else if(BusInfo.find("LINE_KIND").text() == 2){
			html += "<td>간선</td>";
		}else if(BusInfo.find("LINE_KIND").text() == 3){
			html += "<td>지선</td>";
		}else if(BusInfo.find("LINE_KIND").text() == 4){
			html += "<td>마을버스</td>";
		}		
		html += "</tr>"; 
	}
		
	html += "</table>";
	$("#display").empty();
	$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">광주광역시 버스 노선정보</button>
<br/><br/>
<div id="display">
여기에 버스 노선정보가 출력됩니다.
</div>
</body>
</html>

▲test04_jq12.html

 

 

 - ajax 통신으로 jsp 접근 -

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 13</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(){
		var num1 = $("#num1").val();
		var num2 = $("#num2").val();
		//console.log("num1 : " + num1 + "\nnum2 : " + num2);
		
		var param = "num1=" + num1 + "&num2=" + num2;
		//console.log(param);
		
		$.ajax({
			dataType : "text",
			data : param,
			url : "jq13.jsp",
			type : "get",
			success : function(data){ resultHtml(num1, num2, data); },
			error : function(){ alert("에러 발생"); }
		});	//ajax()
	});	//click()
});	//ready()

function resultHtml(num1, num2, data){
	console.log("num1 : " + num1 + "\nnum2 : " + num2 + "\nresult : " + data);
	//리턴 받은 data에는 스트립틀릿 자리가 비어있어서 여백이 두 줄있고 세번째 줄에 data값이 나오게 된다.
	var html = num1 + "부터 " + num2 + "까지의 누적합 : " + data;
	$("#display").html(html);
}
</script>
</head>
<body>
<input type="number" id="num1" required="required"/> ~ <input type="number" id="num2" required="required"/>
<button id="btn">누적합 계산</button>
<div id="display">
	결괏값이 출력되는 영역
</div>
</body>
</html>

▲jq13_ajax_jsp.html

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
int result = 0;
for(int i = num1; i <= num2; i++) {
	result += i;
}
%>
<%=result %>

▲jq13.jsp

반응형

'취업성공패키지 SW 개발자 교육 > Web' 카테고리의 다른 글

[Web] 27. 회원 관리 & 게시판 만들기 ② : 로그인, 회원가입 구현  (2) 2020.06.16
[Web] 26. 회원 관리 & 게시판 만들기 ① : 웹 프로젝트 생성 및 페이지 작성 전 환경 준비  (3) 2020.06.15
[Web] 24. toggleClass, JSON을 jQuery로 읽기, ajax 통신  (0) 2020.06.10
[Web] 23. jQuery : 라이브러리 설정, 테이블 작성, 구구단, 선택자  (0) 2020.06.09
[MyBatis] 22. 쇼핑몰 화면 작성, 장바구니 구현, 로그인 세션 구현  (0) 2020.06.08
'취업성공패키지 SW 개발자 교육/Web' Related Articles more