전체를 누르면 현재 DB에 저장되어 있는 목록이 나타나고
input창에 검색하면 input창에 해당하는 검색어만 출력된다.
jq_ajax_db_xml.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jq_ajax_db_xml.js"></script>
</head>
<body>
<div id="container">
<h2>상품 자료</h2>
<form id="frm" method="POST">
<button id="btnAll">전 체</button>
<label for="txtSang" class="label">상품명 :</label><input type="text" name="sang" id="txtSang">
<button id="btnSearch">검색</button>
</form>
<br/><br/>
<div id="disp"></div>
</div>
</body>
</html>
jq_ajax_db_xml.js
$(document).ready(function() {
// dispAll(); // 전체 출력
$('button#btnAll').click(function(e) {
e.preventDefault();
dispAll();
});
$('button#btnSearch').click(function(e) {
e.preventDefault();
$.post('jq_ajax_db_xml.jsp', {
// getParameter 읽을 때, 이 부분을 읽는다.
sang: $('#txtSang').val()
}, function(data) {
$('#disp').empty();
var str = "<table border=1 width=300>";
str += "<tr bgcolor='yellow'> <th>코드</th><th>상품명</th><th>수량</th><th>단가</th> </tr>";
$(data).find('sangpum').each(function() {
var sangpum = $(this);
str += "<tr>";
str += "<td>"+sangpum.find('code').text()+"</td>";
str += "<td>"+sangpum.find('sang').text()+"</td>";
str += "<td>"+sangpum.find('su').text()+"</td>";
str += "<td>"+sangpum.find('dan').text()+"</td>";
str += "</tr>";
});
str += "</table>";
$('#disp').append(str);
});
});
});
function dispAll() {
$.get('jq_ajax_db_xml.jsp', function(data) {
$('#disp').empty();
var str = "<table border=1 width=300>";
str += "<tr bgcolor='orange'> <th>코드</th><th>상품명</th><th>수량</th><th>단가</th> </tr>";
$(data).find('sangpum').each(function() {
var sangpum = $(this);
str += "<tr>";
str += "<td>"+sangpum.find('code').text()+"</td>";
str += "<td>"+sangpum.find('sang').text()+"</td>";
str += "<td>"+sangpum.find('su').text()+"</td>";
str += "<td>"+sangpum.find('dan').text()+"</td>";
str += "</tr>";
});
str += "</table>";
$('#disp').append(str);
});
}
jq_ajax_db_xml.jsp
<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<board>
<%
//Thread.sleep(2000);
System.out.println("-------------------------------------------------------");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String driver = "oracle.jdbc.driver.OracleDriver";
String url = "jdbc:oracle:thin:@???.???.?.???:????:orcl"; <!-- 사용자가 생성 -->
String sql = "";
request.setCharacterEncoding("UTF-8");
String sang = request.getParameter("sang");
// 1. Driver
try {
Class.forName(driver);
System.out.println("Driver 성공..");
} catch(Exception e) {
System.out.println("Driver 실패..");
}
// 2. Connection
try {
conn = DriverManager.getConnection(url, "사용자id", "암호");
System.out.println("Connection 성공..");
} catch(SQLException e) {
System.out.println("Connection 실패..");
}
System.out.println("sang:"+sang);
// 3. Statement
if (sang == null || sang.equals("") || sang.isEmpty()) {
sql = "SELECT * FROM sales";
} else {
sql = "SELECT * FROM sales WHERE sang LIKE '%"+sang+"%'";
}
//sql = "SELECT * FROM sales";
try {
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
%>
<sangpum>
<code><%=rs.getInt("code") %></code>
<sang><%=rs.getString("sang") %></sang>
<su><%=rs.getInt("su") %></su>
<dan><%=rs.getInt("dan") %></dan>
</sangpum>
<%
}
System.out.println("Statement 성공..");
} catch(SQLException e) {
System.out.println("Statement 실패.."+e.getLocalizedMessage());
} finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch(SQLException e) {
}
}
%>
</board>
oracle
iSQLPlus를 이용하여 table 생성 및 추가하여 데이터를 넣어보아서 테스트를 하였다.
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [jQueryMobile] hello world (0) | 2019.05.27 |
|---|---|
| [jQueryMobile] jQueryMobile 참고 url (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] input : 자료입력 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] meter : 문자 입력 수에 따른 progress example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] image : 이미지 example (0) | 2019.05.27 |
