본문 바로가기
Language

JSON, AJAX, Servlet DB에서 값읽어와 테이블부분 갱신하기

히듀니 2016. 3. 31. 15:48




-JSON (JavaScript Object Notation)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var emp = [ {
        eno : '123',
        name : '임희준',
        emp : '인사',
        hire : '2015/2/3'
    }, {
        eno : '124',
        name : '준희임',
        emp : '인사',
        hire : '2015/3/2'
    }, {
        eno : '345',
        name : '희준임',
        emp : '인사',
        hire : '2015/7/5'
    }, {
        eno : '6554',
        name : '임준희',
        emp : '인사',
        hire : '2016/1/2'
    } ];
 
cs

속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다
-wiki



http://www.json.org/json-ko.html -> json 공식사이트인듯




-AJAX (Asynchronous JavaScript and XML)

얘쓰면 문서 전체를 받아올필요없이 부분만 갱신가능~!

1.client site

type : http request method

url : 요청 경로

dataType : 말그대로 데이타타입

sucess : 요청에대한 응답이오면 실행함




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    
jQuery.ajax({
            type : "post",
            url : "http://192.168.8.45:8099/webprac/ajax/AjaxController",
            data : serData,
            dataType : "json",
            success : function(obj) {
                showempinfo(obj);
            },
            complete : function(xhr,status) {
            
            },
            error : function(xhr, status, error) {
                console.log(error);
            }
        });
 `cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function showempinfo(obj) {
        var div = document.querySelector('#emptable');
        console.log(obj);
        html = '<table>';
        html += '<tr><th>부서번호</th><th>이름</th><th>부서</th></tr>';
        for (var i = 0; i < obj.length; i++) {
            console.log("124");
            html += '<tr><td>' + obj[i].enum + '</td><td>' + obj[i].name
                    + '</td><td> ' + obj[i].ename + '</td></tr>';
        }
        html += '</table>';
 
        console.log("전" + html);
        div.innerHTML = html;
        console.log("후" + html);
    }
cs



2.server site

-servlet으로 받아서 미리 작성해둔 ajaxService로 넘겻당.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@WebServlet("/ajax/*")
public class AjaxController extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        
        
try {
        ajaxService svc = new ajaxService();
            
            svc.process(request,response);
            
        } catch (Exception e) {
            e.printStackTrace();
        }
 
    }
 
}
 
 
 
cs


-DAO클래스에서 값을 받아와 response.getWriter.print()로 전달해쥼;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
public class ajaxService implements service {
 
    public void process(HttpServletRequest request, HttpServletResponse response) {
        
        int no = Integer.valueOf(request.getParameter("eno")); 
        //요청시 전달된 eno를 no에 저장
 
        ajaxVO vo = new ajaxVO();
        ajaxDAO dao = new ajaxDAO();
        vo.setEmpno(no);
        
        String msg = dao.ismem(vo); // DAO로 디비에 접속해서 데이타를받아옴
        
            if(msg!=null){
                PrintWriter out;
                try {
                    out = response.getWriter(); //response해쥼
                    out.print(msg);
                    out.flush();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                
            }
    
    }
}
cs


-DAO(Data Access Object) 디비에서 값 가져오는 클렛스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
public class ajaxDAO {
       private Connection conn;
       private ResultSet rs;
       private Statement st;
       private PreparedStatement pstmt;
 
       private String jdbc_driver = "oracle.jdbc.OracleDriver";
       private String db_url  ="jdbc:oracle:thin:@localhost:1521:xe";
       private String usrId = "scott";
       private String pwd = "TIGER";
 
       public ajaxDAO() {
 
          try {
 
             Class.forName(jdbc_driver);
             System.out.println("드라이버 로딩 성공...");
             conn = DriverManager.getConnection(db_url, usrId, pwd);
             System.out.println("DB 연결 성공!");
             st = conn.createStatement();
 
          } catch (Exception e) {
             e.printStackTrace();
          }
       }
 
       public String ismem(ajaxVO vo) {
 
          String sql = String.format("SELECT ENUM, NAME, ENAME FROM EMPLOYEE WHERE ENUM='%s'", vo.getEmpno());
          String msg = null;
          System.out.println(sql);
          try {
             rs = st.executeQuery(sql);
             msg = "[";
             while (rs.next()) {
                 
                 if(!rs.isFirst())
                     msg+=",";
                msg +="{";
                msg += "\"enum\" : " + rs.getInt("ENUM") + ",";
                msg += "\"ename\" : \"" + rs.getString("ENAME") + "\","; 
                msg += "\"name\" : \"" + rs.getString("NAME")+"\"";
                msg +="}";
             }
             msg += "]";
            return msg;
          } catch (SQLException e) {
             e.printStackTrace();
          }
          return null;
       }
}
cs

rs.next의 while문을보면 msg를 JSON형태로 만들어쥼 

키들(enum, ename, name)은 \"로꼮감싸쥼 안그럼츄움




-> 테이블만갱신됨


'Language' 카테고리의 다른 글

게시글에 소스코드 이쁘게 넣기 colorscripter.com  (0) 2016.02.25

'Language' Related Articles

티스토리툴바