JSP/AJAX.1

Ex04 . jsp_data.jsp / jspReader.jsp / xml_data.xml / xmlReader.jsp

GAWON 2023. 6. 23. 10:13 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 style="color: red">jsp_data.jsp 파일입니다.</h1>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	// 페이지 로드 
	$(function(){
		$("#btn").click(function(){
			// jQuery.load()
			// 주어진 URL로부터 HTML 데이터를 받아서 선택된 객체에 넣어줌
			$("#content").load("jsp_data.jsp");
		});
	});
</script>
</head>
<body>
	<button id="btn">가져오기</button>
	<br><br>
	
	<div>
		<h1 style="color: maroon;">jspReader.jsp 입니다.</h1>
		<div id="content"></div>
	</div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE people>

<people>
	<person>
		<name>김</name>
		<age>30</age>
	</person>
	<person>
		<name>이</name>
		<age>40</age>
	</person>
	<person>
		<name>박</name>
		<age>50</age>
	</person>
	<person>
		<name>최</name>
		<age>60</age>
	</person>
	<person>
		<name>정</name>
		<age>70</age>
	</person>
</people>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	// 페이지 로드 
	$(function(){
		$("#btn").click(function(){
			
			var msg = '<ul>';
			
			// get 방식의 페이지 로드
			$.get("xml_data.xml", function(data){
				// data 매개변수 : xml_data.xml 파일을 읽은 내용
				
				// jQuery.find()
				// 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용
				$(data).find("person").each(function(){
					var name = $(this).find("name").text();
					var age = $(this).find("age").text();
					
					msg += "<li>이름 : " + name + "</li>";
					msg += "<li>나이 : " + age + "</li>";
				});

				$("#content").html(msg);
			
			});
			
			
			
			
			
			msg += '</ul>';
			
			
			
		});
	});
</script>
</head>
<body>
	<button id="btn">가져오기</button>
	<br><br>
	
	<div>
		<h1 style="color: maroon;">xmlReader.jsp 입니다.</h1>
		<div id="content"></div>
	</div>
</body>
</html>
저작자표시