b.jsp
====================================================
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<style type="text/css">
td{
border:2px double #FF5E00;
font-family:"휴먼매직체";
text-align:center;
}
#a{
background: #FFFFB4;
text-align:center;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#b").click(function(){
$.ajax({
url:"a.jsp",
dataType:"json",
cache:false,
success:function(data){
var key=Object.keys(data["memberlist"][0]);//키들이 배열형식으로 들어감
$("#con").html(""); //버튼클릭시 html초기화 시켜줌
$("<table/>").appendTo("#con"); //div에 테이블 태그 생성
var item=[]; //제목명을 저장할 배열 선언
item.push("<td id=a>"+key[1]+"</td>");
item.push("<td id=a>"+key[2]+"</td>");
item.push("<td id=a>"+key[0]+"</td>");
item.push("<td id=a>"+key[3]+"</td>");
$("<tr/>",{
html:item
}).appendTo("table");
$.each(data.memberlist,function(index,memberlist){
var items=[];
items.push("<td>"+memberlist.id+"</td>");
items.push("<td>"+memberlist.pw+"</td>");
items.push("<td>"+memberlist.addr+"</td>");
items.push("<td>"+memberlist.tel+"</td>");
$("<tr/>",{
html:items
}).appendTo("table");
});//each끝
}
});
});
});
</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.*"%>
<%
String id=request.getParameter("id");
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);
%>
'개발하자 > ajax&json' 카테고리의 다른 글
| data에 배열넣어서 json으로 원하는 value값 얻어오기 (0) | 2015.03.24 |
|---|---|
| 회원리스트 클릭시 순서있는 리스트로 db id뿌리기 (0) | 2015.03.10 |
| id값 리스트로 만들기 (0) | 2015.03.03 |
| dataType:'json',$.getJSON,$.parseJSON (0) | 2015.03.03 |
| 텍스트박스에 id치고 정보보기 클릭하면 db정보 보임 (0) | 2015.03.03 |