<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
ul,li {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: 150px;
height: 50px;
font-family: 'Do Hyeon';
font-size: 1.5em;
border: 1px solid tomato;
margin: 0;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function() {
//home 이벤트..li 첫번째
$("li:eq(0)").click(function() {
var img="<img src='../cat/cat1.JPG' style='width:400px;' class='img-tumbnail'> ";
img+="<img src='../cat/cat2.JPG' style='width:400px;' class='img-thumbnail'>";
$("#show").html(img);
});
//emp 이벤트..li 두번째
$("li:eq(1)").click(function() {
$.ajax({
type:"get",
url:"ex4_emptoxml.jsp",
dataType:"xml",
success:function(data){
var s="<table class='table table-bordered' style='width:700px;'>";
s+="<caption><h3>Emp 목록</h3></caption>";
s+="<tr bgcolor='yellow'>";
s+="<th>No.</th><th>이름</th><th>연락처</th><th>주소</th><th>입사일</th>";
s+="</tr>";
$(data).find("emp").each(function(i,element){
var n=$(this);
s+="<tr>";
s+="<td>"+n.find("num").text()+"</td>";
s+="<td>"+n.find("name").text()+"</td>";
s+="<td>"+n.find("hp").text()+"</td>";
s+="<td>"+n.find("addr").text()+"</td>";
s+="<td>"+n.find("ipsa").text()+"</td>";
s+="</tr>";
});
s+="</table>";
$("#show").html(s);
}
})
});
//client 이벤트..li 세번째
$("li:eq(2)").click(function() {
$.ajax({
type:"get",
url:"ex7_clienttojson.jsp",
dataType:"json",
success:function(data){
var s="<table class='table table-bordered' style='width:700px;'>";
s+="<caption><h3>Client 목록</h3></caption>";
s+="<tr>";
s+="<th>User_ID</th><th>이름</th><th>나이</th><th>주소</th>";
s+="</tr>";
$.each(data,function(i,elt){
s+="<tr>";
s+="<td>"+elt.userid+"</td>";
s+="<td>"+elt.name+"</td>";
s+="<td>"+elt.age+"</td>";
s+="<td>"+elt.addr+"</td>";
s+="</tr>";
});
s+="</table>";
$("#show").html(s);
}
});
});
});
</script>
</head>
<body>
<ul>
<li>Home</li>
<li>Emp목록</li>
<li>Client목록</li>
</ul>
<div style="clear: both;"></div>
<div id="show" style="margin-top: 50px;">show</div>
</body>
</html>
'Ajax' 카테고리의 다른 글
| 211018_ajax로 게시판 만들기 (0) | 2021.10.18 |
|---|---|
| 211015_ex9부터 (0) | 2021.10.15 |
| 211015_db 생성후 JSONObject를 생성해서 json파일 만들기 (0) | 2021.10.15 |
| 211015_db생성하여 jsp에서 json으로 변환후 ajax로 불러오기 (0) | 2021.10.15 |
| 211015_ (0) | 2021.10.15 |