ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기

관리X 과거글

by 까먹기전에 2015. 3. 4. 16:16

=============================b.jsp===============================

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<html>

<head>

table{

border-collapse: collapse;

}

td{

border: #ABF200 solid;

}

</style>

</head>

$(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>

</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);

%>

저작자표시

'관리X 과거글' 카테고리의 다른 글

jsp 파라미터값 서블릿으로 받아서 웹으로 뿌리기 (0)	2015.03.05
jsp 서블릿 한글 깨질 때 서블릿에서 한글처리 하는방법 (0)	2015.03.05
JSONObject 이용해서 데이터 넘기기 (0)	2015.03.03
ajax 랑 jquery 를 이용해서 데이터 가져오기 (0)	2015.03.03
제이쿼리 each 에 대해 (0)	2015.03.03