728x90
반응형
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/jqueryajax/jqueryajax4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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() {
$("#jsonbtn").click(function(){
$("#result").html("") //클릭시 기존것 삭제
$.ajax({
url : "person.jsp",
success : function(data) {
let person = JSON.parse(data);
$.each(person,function(index,item) {
$("#result").append("<h3>" + item.name + ":" + item.gender + ":" + item.part + "</h3>")
})
}
})
})
})
$(function() {
$("#housebtn").click(function(){
$.ajax({
url : "../ajax/house.jsp",
success : function(data) {
let house = JSON.parse(data);
let htmldata = "<table border='1'>" + "<tr><th>주소</th><th>가격</th><th>특징</th></tr>";
$.each(house.properties,function(index,item) {
htmldata +=
"<tr><td>" + item.address +
"</td><td>" + item.price +
"</td><td>" + item.comment +
"</td></tr>"
})
htmldata += "</table>"
$("#house").html(htmldata);
}
})
})
})
</script>
</head>
<body>
<button id="jsonbtn">JSON 연습</button>
<div id="result"></div>
<hr>
<!-- ajax 폴더의 house.jsp를 이용하여 table 형태로 출력하기 -->
<button id="housebtn">House 정보</button>
<div id="house"></div>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jquery1/src/main/webapp/jqueryajax/person.jsp --%>
[
{"name":"임완준","gender":"남자","part":"기타"},
{"name":"박민","gender":"여자","part":"드럼"},
{"name":"임금","gender":"여자","part":"보컬"}
]<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--src/main/webapp/ajax/house.jsp --%>
<%--
json 문서
[ ] : 배열표시
{ } : json 객체
키 : 값
--%>
{"properties" : [
{ "address" : "서울시 종로구 가회동 100번지",
"price" : 50000,
"comment" : "조용하고 좋은 이웃"
},
{ "address" : "서울시 종로구 역삼동 100번지",
"price" : 5000,
"comment" : "학교 백화점 등 편의 시설 좋음"
},
{ "address" : "경기도 부천시 역곡동 100번지",
"price" : 3000,
"comment" : "교통 좋고, 공기 좋음"
}
]}728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 26. Ajax를 이용하여 id 체크하기 [(회원가입)userEntry.jsp, AjaxController.java] (0) | 2022.05.19 |
|---|---|
| [Ajax] 23. 시,군,도 출력하기 (doGet방식) (0) | 2022.05.02 |
| [Ajax] 22. Ajax로 xml 예제2 (0) | 2022.04.28 |
| [Ajax] 23. Ajax를 이용한 로그인 (0) | 2022.04.28 |
| [Ajax] 23. jquery를 이용한 Ajax연습 (0) | 2022.04.27 |