=============================b.jsp===============================
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
border: #ABF200 solid;
}
</style>
</head>
<script src="jquery-2.1.3.js"></script>
<script>
$(document).ready(function() {
$("#con").hide()
$("#b").click(function() {
$.ajax({
url : "a.jsp", // a.jsp 의 제이슨오브젝트값을 가져옴
dataType : "json", // 데이터 타입을 제이슨 꼭해야함, 다른방법도 2가지있음
cache : false, // 이걸 안쓰거나 true하면 수정해도 값반영이 잘안댐
success : function(data) {
$("#con").html(""); // div를 일단 공백으로 초기화해줌 , 왜냐면 버튼 여러번 눌리면 중첩되니깐
$("<table/>").css({
backgroundColor : "#E4F7BA",
border : "solid 3px #E4F7BA",
}).appendTo("#con"); // 테이블을 생성하고 그 테이블을 div에 추가함
var key = Object.keys(data["memberlist"][0]); // id , pw , addr , tel 의 키값을 가져옴
$("<tr>" , {
html : "<td>" + key[1] + "</td>"+ // 컬럼명들
"<td>" + key[2] + "</td>"+
"<td>" + key[0] + "</td>"+
"<td>" + key[3] + "</td>"
}).appendTo("table") // 이것을 테이블에붙임
$.each(data.memberlist, function(index, memberlist) { // 이치를 써서 모든 데이터들을 배열에 넣음
var items = [];
items.push("<td>" + memberlist.id + "</td>"); // 여기에 id pw addr tel의 값을 배열에 넣은뒤
items.push("<td>" + memberlist.pw + "</td>");
items.push("<td>" + memberlist.addr + "</td>");
items.push("<td>" + memberlist.tel + "</td>");
$("<tr/>", {
html : items // 티알에 붙임,
}).appendTo("table"); // 그리고 그 tr을 테이블에 붙임
});//each끝
}
});
$("#con").fadeToggle("slow")
});
});
</script>
<body>
<input type="button" id="b" value="회원정보보기">
<div id="con"></div>
</body>
</html>
===================================a.jsp====================================
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.util.*" %>
<%@ page import="kr.co.seoulit.member.dao.*" %>
<%@ page import="kr.co.seoulit.member.to.*" %>
<%@ page import="net.sf.json.*"%>
<%
MemberDAO dao=MemberDAOImpl.getInstance();
List<MemberBean> memberlist=dao.selectMemberList();
HashMap<String,Object> map=new HashMap<String,Object>();
map.put("memberlist",memberlist);
JSONObject jsonObject= new JSONObject();
jsonObject.putAll(map);
out.println(jsonObject);
%>
'WebPrograming > Jquery' 카테고리의 다른 글
db에서 받은 배열을 json으로 전환하기 (0) | 2015.05.18 |
---|---|
jQuery 플러그인 xml 을 json 객체로 변환 (0) | 2013.05.11 |
Jquery, location.href, 페이지 이동 (1) | 2013.03.20 |
[Java Script] Java Script 암호화(Packer) (0) | 2012.11.22 |
jQuery Ajax - getJSON예제[실습] (0) | 2012.10.26 |