Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				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

Tags more

Archives

Today

Total

관리 메뉴

gyeomii

AJAX(2) - JSP와 연계 본문

개발

AJAX(2) - JSP와 연계

gyeomii 2023. 7. 4. 14:36

📌HTML파일

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../css/outStyle.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="button" id="type_json" value="타입json">
    <input type="button" id="type_html" value="타입html">
    <div></div>
    <script>
        $('#type_json').on('click', function () {
            $.ajax({
                url: 'lprod.jsp',    //jsp - mvc1패턴
                //         type : 'get',
                success: function (data) {
                    let result = "<table border='1'>";
                    result += "<tr>";
                    result += "<th>lprod_id</th>";
                    result += "<th>lprod_gu</th>";
                    result += "<th>lprod_nm</th>";
                    result += "</tr>";

               $.each(data, function(){
                    result += "<tr>";
                        result += "<td>" + this.lprod_id + "</td>";
                        result += "<td>" + this.lprod_gu + "</td>";
                        result += "<td>" + this.lprod_nm + "</td>";
                        result += "</tr>";
                    }); 

                    result += "</table>";
                    $('div').html(result);
                },
                error: function (xhr) {
                    alert("상태 : " + xhr.status);
                },
                //         complete
                dataType: 'json'
            });
        });
    </script>
</body>
</html>

$.ajax()메소드

$.ajax({
        url: 'lprod.jsp',
//    type : 'get',
        success: function (data) {
                let result = "<table border='1'>";
                $.each(data, function(){
                         result += "<tr>";
                        result += "<td>" + this.lprod_id + "</td>";
                        result += "<td>" + this.lprod_gu + "</td>";
                        result += "<td>" + this.lprod_nm + "</td>";
                        result += "</tr>";
                }); 
                result += "</table>";
                $('div').html(result);
        },
        error: function (xhr) {
                alert("상태 : " + xhr.status);
        },
//     complete: function(){},
        dataType: 'json'
});

$.ajax()메소드 정리

메소드	설명
url	요청을 보낼 URL을 나타냄. default는 현재 페이지
type	요청 type. default는 get (생략가능)
sucess( result, status, xhr )	요청이 성공했을 떄 수행되는 함수
error( xhr, status, error )	요청이 실패했을 때 실행되는 함수
complete( xhr, status )	요청이 완료됐을 때 실행되는 함수
dataType	서버응답으로 받는 데이터 타입( json, html 등)
- success : function(data){data를 꺼내오는 과정}
- $.each() 설명 링크 : JSON데이터 파싱하기
- error : function(xhr){xhr.status}
- xhr : XMLHttpRequest의 상태를 가져옴 (관련링크 : readyState 프로퍼티)

📌JSP파일

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//커넥션 객체 만들고 
Class.forName("oracle.jdbc.driver.OracleDriver");
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String user = "userId";
String password = "password";
Connection conn = DriverManager.getConnection(url, user, password);

//db에 접근해서 sql실행하고 
Statement stmt = conn.createStatement();
String sql = "select * from lprod";
// stmt.executeQuery(sql);
ResultSet rs = stmt.executeQuery(sql);

//결과값 을 받아서 json object array로 만들어서
%>
[
<%
int i = 0;
while (rs.next()) {
    int id = rs.getInt("lprod_id");
    String gu = rs.getString("lprod_gu");
    String nm = rs.getString("lprod_nm");
    //json object 생성
    if (i > 0){
        out.print(",");
    }
%>
{ "lprod_id" : "<%=id%>", "lprod_gu" : "<%=gu%>", "lprod_nm" : "<%=nm%>" }
<%
i++;
} //while end
%>
]

JSP파일에서 DB에 접근하여 데이터를 가져오기
- Connection 객체를 생성해 접근한다.
```
Connection conn = DriverManager.getConnection(url, user, password);
```
- Connection객체로 연결되면 Statement객체로 SQL을 실행한다.
```
Statement stmt = conn.createStatement();
String sql = "select * from lprod";
```
- SQL로 검색된 데이터를 ResultSet에 담아서 JSP파일로 가져온다.
```
ResultSet rs = stmt.executeQuery(sql);
```
가져온 데이터를 형태에 맞게 꺼내기
- ResultSet에 next()메소드를 사용하여 데이터를 하나씩 꺼낸다.
- 데이터에 맞는 타입의 변수를 선언하고 get(”컬럼명”)메소드로 컬럼 별 데이터를 꺼낸다.
```
while (rs.next()) {
  int id = rs.getInt("lprod_id");
  String gu = rs.getString("lprod_gu");
  String nm = rs.getString("lprod_nm");
}
```
- 꺼낸 데이터를 JSON Object 형태로 담는다.
```
{ "lprod_id" : "<%=id%>", "lprod_gu" : "<%=gu%>", "lprod_nm" : "<%=nm%>" }
```

주의사항

JSP파일에서 자바코드를 작성할 때는 <% %> (scriptlet, 스크립트릿) 안에서 해야한다.
스크립트릿안에는 자바코드가 아닌 문자열이 들어갈 수 없다.
JSON Object의 형태를 잡기위해 문자열을 적을 때는 전 후로 스크립트릿을 끊어줘야한다.

<%
  :
자바코드
  :
%>

[  //JSON Objet Array 형태

<%
  :
자바코드
  :
%>

{ "lprod_id" : "<%=id%>", "lprod_gu" : "<%=gu%>", "lprod_nm" : "<%=nm%>" }

<%
  :
자바코드
  :
%>

]  //JSON Objet Array 형태

'개발' 카테고리의 다른 글

HTML을 동적으로 사용하기 (0)	2023.07.14
JavaScript 예제 (0)	2023.07.04
AJAX(1) (0)	2023.06.30
MVC 패턴 (0)	2023.06.26
[Python] JSON, CSV 읽고 쓰기 (0)	2023.06.16

'개발' Related Articles

gyeomii

AJAX(2) - JSP와 연계 본문

AJAX(2) - JSP와 연계

📌HTML파일

$.ajax()메소드

$.ajax()메소드 정리

📌JSP파일

주의사항

'개발' 카테고리의 다른 글

티스토리툴바