AJAX로 JSON타입 데이터 가져오기(JQuery사용)

Gyeomii·2022년 6월 25일

DDITHTML

목록 보기

2/3

📌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 형태

Gyeomii

김성겸

이전 포스트

AJAX 정리 및 Notion 링크

다음 포스트

JS예제(1)

1개의 댓글

이은정

2022년 6월 28일

갓성겸... 감삼니다

답글 달기