728x90
반응형
데이터를 불러오는 페이지 ajax.jsp
webapp/ajax.jsp
<script>
function loadFn() {
alert("데이터 요청");
$.ajax({
url: "ajax/db.jsp", // 데이터를 가져올 경로 설정
type: "get", // 데이터를 가져오는 방식
success: function(data){ // 데이터를 가져왔을때 동작. 매개변수로 data 입력
alert("연결성공");
var json = JSON.parse(data.trim()); // 가져온 데이터를 자바스크립트 객체로 변환해주는 작업이 필요
// trim()을 통해 불필요한 여백 제거
for (var i = 0; i < json.length; i++) {
bidx = json[i].BIDX;
subject = json[i].SUBJECT;
content = json[i].CONTENT;
writer = json[i].WRITER;
$("tbody").append("<tr>"+ // append: 셀렉터 안에 요소를 추가
"<td>"+bidx+"</td>"+
"<td>"+subject+"</td>"+
"<td>"+content+"</td>"+
"<td>"+writer+"</td>"+
"</tr>");
}
}
})
}
</script>
<body>
<button onclick="loadFn()> board 테이블 불러오기 <button>
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
<th>작성자</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="result"></div>
</body>
DB로부터 데이터를 연결해서 출력하는 페이지 db.jsp
webapp/ajax/db.jsp
<%
// 데이터베이스에 연결
String url = "jdbc:oracle:thin:@127.0.0.1:1521:xe";
String user = "system";
String password = "1234";
// 드라이버를 가져옴
Class.forName("oracle.jdbc.driver.OracleDriver");
// 접속 정보를 활용해서 연결 객체를 생성
Connection conn = DriverManager.getConnection(url, user, password);
PreparedStatment pstmt;
ResultSet rs = null;
// 쿼리문을 통해 데이터를 ResultSet에 담기
String sql = "SELECT BIDX, SUBJECT, CONTENT, WRITER FROM BOARD";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
// Json 형태로 변환
JSONArray array = new JSONArray(); // [], JSON 배열 생성
while(rs.next()) {
JSONObject obj = new JSONObject(); // {}, JSON 객체 생성
obj.put("bidx", rs.getInt("BIDX")); // obj.put("key","value")
obj.put("subject", rs.getString("SUBJECT"));
obj.put("content", rs.getString("CONTENT"));
obj.put("writer", rs.getString("WRITER"));
array.add(obj) 작성한 JSON 객체를 배열에 추가
}
out.print(array.toJSONString()); // Ajax는 출력된 데이터를 전송하므로 데이터를 출력해줘야 한다
%>
'JSP' 카테고리의 다른 글
| [JSP] 구글 차트를 이용한 그래프 그리기 (0) | 2022.06.08 |
|---|---|
| [JSP] select 태그의 데이터 전송 (0) | 2022.05.20 |
| [JSP] JSP 기초, 내장 객체 (0) | 2022.05.06 |
| Model 1 vs Model 2, MVC 구조 (0) | 2022.04.21 |