1.
$.ajax({
"url" : "tableData.jsp",
"type" : "get",
"dataType": "json",
"data" : {"dataType":"init"},
"success" : function(data){
alert("가져온 데이터 입니다 . "+data);
var str = "<select id='mainTableList'>";
str +="<tr >";
$.each(data,function(i,v){
//데이터 인풋
str +="<td>"+ v.mem_id+"</td>;
});
str +="</tr>";
$("#tableList").html(str);
},
"error" : function(info, xhr){
if(info.readyState == '4'){
alert('문제가 발생했습니다.\n상태코드 : ' + info.status+ '\n\n' + info.responseText);
}
else{
alert('문제가 발생했습니다.\n잠시후 다시 시도해 주세요.\n 상태코드 : ' +info.status);
}
}
});
tableData.jsp 에서 JSON 타입으로 데이터를 가져 오며. 그것에 대하여 성공(success),또는 실패로 구분할수 있다.
가져온 데이터에 대하여 i 는 index v 는 i번째 (Ajax 는 1부터 시작)의 value 를 뜻한다. 데이터 에 대해서는 밑에서 말하겠다.
2.
$.getJSON("memberData.jsp",
function(data){
// alert(data);
var str = "<table id='mem_list' align='center'border='1' bordercolor='yellow' >";
str += "<tr bgcolor='silver'><th>회원ID</th><th>회원성명</th><th>주민번호</th><th>우편번호</th>";
str +="<th>주 소</th><th>회사전화</th><th>핸드폰</th><th>이메일</th></tr>";
$.each(data, function(i, v){
str += "<tr id='mem_select'>";
str += "<td class='mem_id'>" + v.mem_id + "</td>";
str += "<td>" + v.mem_name + "</td>";
str += "<td>" + v.mem_regno + "</td>";
str += "<td>" + v.mem_zip + "</td>";
str += "<td>" + v.mem_add + "</td>";
str += "<td>" + v.mem_comtel + "</td>";
str += "<td>" + v.mem_hp + "</td>";
str += "<td>" + v.mem_mail + "</td></tr>";
});
str += "</table>";
$("#memList").html(str);
});
JSON 데이터 가져 오기의 두번째 형태 이다.
여기서는 memberData.jsp 로 바로 데이터를 보내서 가져오는 형태 이다. 간단 하지만 에러가 나도 어디서 문제 인지 알수 없는 문제가 있다. 하지만
코딩이 간단 하기때문에 구현을 쉽게 할수 있다.
"mem_id="+mem_id , 를 추가 하여 파라미터 값으로 보내 줄수 도 있다.
$("#mem_select").live("click", function(){
var mem_id = $(this).children(".mem_id").text().trim();
$.getJSON("memberData.jsp",
"mem_id="+mem_id,
function(data){
$.each(data,function(i,v){
$("#mem_id").val(v.mem_id);
$("#mem_pass").val(v.mem_pass);
$("#mem_name").val(v.mem_name);
$("#mem_regno").val(v.mem_regno);
$("#mem_bir").val(v.mem_bir);
$("#mem_zip").val(v.mem_zip);
$("#mem_add").val(v.mem_add);
$("#mem_hometel").val(v.mem_hometel);
$("#mem_comtel").val(v.mem_comtel);
$("#mem_hp").val(v.mem_hp);
$("#mem_mail").val(v.mem_mail);
$("#mem_job").val(v.mem_job);
$("#mem_like").val(v.mem_like);
$("#mem_memorial").val(v.mem_memorial);
$("#mem_memorialday").val(v.mem_memorialday);
$("#mem_mileage").val(v.mem_mileage);
if (v.mem_delete != "y") {
$("#mem_delete").attr("checked", true);
}
});
});
});
위 예제는 1번2 번에서 가져온 데이터에 대하여 div 의 id 값에 html 형식으로 넣어서 구현 되어진 것에 대하여
live 형식으로 클릭 되었을때 이벤트가 실행 되도록 하는 메서드 이다. 반드시 live 형식으로 구현 해야 하는데 그 이유는 맨처음 시작시에 JSON 데이터 메서드가 시작전에
는 만들어지지 않은 객체 이기 때문에 일반 형식으로 구현시에 없는!!! 객체를 구현 하라고 명령 하는 것임으로 실행이 안된다.
대상이 되어 지는 DATA .jsp의 형식은 대략 이러 함.
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="kr.or.ddit.db.ConnectionProvider"%>
<%@page import="java.sql.Connection"%>
<%@ page import = "kr.or.ddit.db.*" %>
<% request.setCharacterEncoding("UTF-8");
String mem_id=request.getParameter("mem_id");
System.out.print(mem_id);
%>
[
<%
Connection conn = null;
PreparedStatement psmt = null;;
ResultSet rs = null;
try{
conn =ConnectionProvider.getConnection();
if(mem_id==null){
psmt = conn.prepareStatement("select * from member");
}else {
psmt = conn.prepareStatement("select * from member where mem_id=?");
psmt.setString(1, mem_id);
}
rs=psmt.executeQuery();
%>
<%
while(rs.next()){
if(rs.getRow()>1){
out.print(",");
}
%>
{
"mem_id" : "<%=Util.toJS(rs.getString("mem_id"))%>",
"mem_pass" : "<%=Util.toJS(rs.getString("mem_pass"))%>",
"mem_name" : "<%=Util.toJS(rs.getString("mem_name"))%>",
"mem_regno" : "<%=Util.toJS(rs.getString("mem_regno1"))%> - <%=Util.toJS(rs.getString("mem_regno2"))%>",
"mem_bir" : "<%=Util.toJS(rs.getString("mem_bir")).subSequence(0, 10)%>",
"mem_zip" : "<%=Util.toJS( rs.getString("mem_zip"))%>",
"mem_add" : "<%=Util.toJS(rs.getString("mem_add1"))%> <%=Util.toJS(rs.getString("mem_add2"))%>",
"mem_hometel" : "<%=Util.toJS(rs.getString("mem_hometel"))%>",
"mem_comtel" : "<%=Util.toJS(rs.getString("mem_comtel"))%>",
"mem_hp" : "<%=Util.toJS(rs.getString("mem_hp"))%>",
"mem_mail" : "<%=Util.toJS(rs.getString("mem_mail"))%>",
"mem_job" : "<%=Util.toJS(rs.getString("mem_job"))%>",
"mem_like" : "<%=Util.toJS(rs.getString("mem_like"))%>",
"mem_memorial" : "<%=Util.toJS(rs.getString("mem_memorial"))%>",
"mem_memorialday" : "<%=Util.toJS(rs.getString("mem_memorialday")).subSequence(0, 10)%>",
"mem_mileage" : "<%=Util.toJS(rs.getString("mem_mileage"))%>",
"mem_delete" : "<%=Util.toJS(rs.getString("mem_delete"))%>"
}
<%
}
}catch(SQLException e){
e.printStackTrace();
}finally{
if(rs!=null) try{rs.close();}catch(Exception e){}
if(psmt!=null) try{psmt.close();}catch(Exception e){}
if(conn!=null) try{conn.close();}catch(Exception e){}
}
%>
]
