<!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({
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'
});
๋ฉ์๋ | ์ค๋ช |
---|---|
url | ์์ฒญ์ ๋ณด๋ผ URL์ ๋ํ๋. default๋ ํ์ฌ ํ์ด์ง |
type | ์์ฒญ type. default๋ get (์๋ต๊ฐ๋ฅ) |
sucess( result, status, xhr ) | ์์ฒญ์ด ์ฑ๊ณตํ์ ๋ ์ํ๋๋ ํจ์ |
error( xhr, status, error ) | ์์ฒญ์ด ์คํจํ์ ๋ ์คํ๋๋ ํจ์ |
complete( xhr, status ) | ์์ฒญ์ด ์๋ฃ๋์ ๋ ์คํ๋๋ ํจ์ |
dataType | ์๋ฒ์๋ต์ผ๋ก ๋ฐ๋ ๋ฐ์ดํฐ ํ์ ( json, html ๋ฑ) |
<%@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 conn = DriverManager.getConnection(url, user, password);
Statement stmt = conn.createStatement();
String sql = "select * from lprod";
ResultSet rs = stmt.executeQuery(sql);
๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ํํ์ ๋ง๊ฒ ๊บผ๋ด๊ธฐ
while (rs.next()) {
int id = rs.getInt("lprod_id");
String gu = rs.getString("lprod_gu");
String nm = rs.getString("lprod_nm");
}
{ "lprod_id" : "<%=id%>", "lprod_gu" : "<%=gu%>", "lprod_nm" : "<%=nm%>" }
<%
:
์๋ฐ์ฝ๋
:
%>
[ //JSON Objet Array ํํ
<%
:
์๋ฐ์ฝ๋
:
%>
{ "lprod_id" : "<%=id%>", "lprod_gu" : "<%=gu%>", "lprod_nm" : "<%=nm%>" }
<%
:
์๋ฐ์ฝ๋
:
%>
] //JSON Objet Array ํํ