본문 바로가기
study/Ajax

[Ajax] 22. Ajax을 이용한 게시물검색1

by 금이패런츠 2022. 4. 27.
728x90
반응형
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--src/main/webapp/test0426/board1.jsp --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
  request.setCharacterEncoding("utf-8");
  //드라이버 클래스 설정
  Class.forName("oracle.jdbc.driver.OracleDriver");
  //오라클 db 연결
  Connection conn = DriverManager.getConnection
		  ("jdbc:oracle:thin:@localhost:1521:xe","kic","1234");
  //파라미터 가져오기
  String column = request.getParameter("column");
  String find = request.getParameter("find");
  String sql = "select * from board where "+column +" like ?"; 
  PreparedStatement pstmt = conn.prepareStatement(sql);
  pstmt.setString(1,"%"+find+"%");
  ResultSet rs = pstmt.executeQuery();
//  pageContext.setAttribute("rs", rs);
%>
<table border="1" style="border-collapse: collapse;">
<tr><th>번호</th><th>글쓴이</th><th>제목</th>
    <th>내용</th><th>등록일</th><th>조회수</th></tr>
<% while(rs.next()) {%>
<tr>
	<td><%=rs.getString("num") %></td>
    <td><%=rs.getString("writer") %></td>
    <td><%=rs.getString("subject") %></td>
    <td><%=rs.getString("content") %></td>
    <td><%=rs.getString("regdate") %></td>
    <td><%=rs.getString("readcnt") %></td>
</tr>
<%} %>
</table>

/*  src/main/webapp/css/main.css   */
table {	width : 100%; 	border-collapse: collapse;  }
th,td {
	border : 3px solid #bcbcbc;
	text-align: center;
	padding: 8px;
}
th { background-color: #B7F0B1;     color : #353535;     }
td { background-color: #F2F2F2;}
caption {	color : #111111;  font-size: 20px;
	background-color: #FFFFFF;  }
input[type=text],input[type=password],textarea {
	width:100%;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax을 이용한 게시물 검색</title>
<link rel="stylesheet" href="main.css" >
<script type="text/javascript" src="../ajax/ajax.js"></script>
<script type="text/javascript">
   function loadBoard(f){
	   var params = 
		   "column=" + f.column.value + "&find=" + f.find.value;
	   sendRequest("board.jsp",params, boardList,"POST"); //서버로 전송
   }
   function boardList() { //콜백함수
	   if(ajax.readyState == 4) {
		   if(ajax.status == 200) {
			   //responseText : 서버에서 전송해준 내용
			   list.innerHTML = ajax.responseText;
		   } else {
			   alert("서버 오류:" + ajax.status + "=" + ajax.statusText);
		   }
	   }
   }
</script>
</head>
<body>
<form name="f">
  <select name="column">
    <option value="writer">글쓴이</option>
    <option value="subject">제목</option>
    <option value="content">내용</option>
  </select>
  <input type="text" name="find">
  <input type="button" value="검색" onclick="loadBoard(this.form)">
</form>
<div id="list"></div>
</body>
</html>
728x90
반응형

'study > Ajax' 카테고리의 다른 글

[Ajax] 23. jquery를 이용한 Ajax연습  (0) 2022.04.27
[Ajax] 22. Ajax로 xml 예제1  (0) 2022.04.27
[Ajax] 22. Ajax로 xml, json 분석하기  (0) 2022.04.27
[Ajax] 22. Ajax을 이용한 게시물검색2  (0) 2022.04.27
[Ajax] 22. Ajax  (0) 2022.04.26