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){}
   
    }

%>
]



'AJAX' 카테고리의 다른 글

PJax ?  (0) 2012.08.24
Dialog  (0) 2012.06.19
Ajax 란  (0) 2012.05.24
Posted by 사라링
BLOG main image
.. by 사라링

카테고리

사라링님의 노트 (301)
JSP (31)
J-Query (41)
JAVA (24)
VM-WARE (0)
디자인패턴 (1)
스크랩 (0)
스트러츠 (3)
안드로이드 (11)
오라클 (45)
우분투-오라클 (1)
이클립스메뉴얼 (6)
스프링3.0 (23)
자바스크립트 (10)
HTML5.0 (17)
정보처리기사 (1)
기타(컴퓨터 관련) (1)
문제점 해결 (3)
프로젝트 (2)
AJAX (4)
하이버네이트 (3)
트러스트폼 (11)
Jeus (2)
재무관리(회계) (5)
정규식 (5)
아이바티스 (8)
취미 (2)
소프트웨어 보안 관련모음 (0)
정보보안기사 (6)
C언어 베이직 및 프로그램 (3)
보안 관련 용어 정리 (2)
넥사크로 (6)
Total :
Today : Yesterday :