728x90
SMALL
emp_search_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>emp_search_form</title>
<style>
#items >div {
display : inline-block;
width : 200px;
height : 200px;
border : 1px solid #ccc;
padding : 5px;
box-shadow : 2px 2px 3px #999;
border-radius : 12px;
margin-right : 7px;
}
.emp > div:first-child{
color : #00f;
border-bottom : 1px dotted #555;
}
.emp > div:nth-child(2){
font-weight : bolder;
}
</style>
</head>
<body>
<div id='emp_search_form'>
<h2>사원조회</h2>
<form name='frm' method='post' id='frm'>
<label>검색어를 입력하세요 </label>
<input type='text' name='findStr' size='30' placeholder ='성명, 이메일, 연락처로 검색' />
<input type='button' value='검색' id='btnFind'/>
</form>
<hr/>
<!-- 실행된 값을 표시 -->
<div id='items'></div>
</div>
<script>
$('#btnFind').on('click', function(){
let param = $('#frm').serialize(); //form태그안에있는 정보들을 직렬화(p=v & p=v)
let req = new XMLHttpRequest(); //중요한부분
//1 오픈
req.open('get', './ajax/emp_search.jsp?' + param); //get타입으로 요청, **에게 자료요청 (get타입은 ?문자열형태라 간단함)
//2 상태값체크
req.onreadystatechange=function(){
//console.log(req.status + "," + req.readyState);
//200 : 정상요청(송신) & 4 : 응답이 정상적으로 왔다(수신)
if(req.status==200 && req.readyState==4){
$('#items').html(req.responseText); //응답정보를 text형태로 갖고와서 그 값을 items영역에 html로 표시해달라
}
}
//3 전송
req.send();
})
</script>
</body>
</html>
emp.search.jsp
<%@page import="bean.EmpDao"%>
<%@page import="bean.EmpVo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//?findStr = abc 입력하면 emp_search로 전달
//emp_search_form이 ajax로 요청을 함 (중간역할) = servlet, spring-controller
//사용자의 요청정보를 dao에 전달한 후 그 결과를 다시 사용자에게 반환
//emp-Search_form.jsp의 findStr버튼 ( request : 사용자의 요청정보가 들어있는 객체_그 중에서 findStr파라미터를 가져와라)
//요청된 파라미터를 가져와라 파라미터의 종류는 findStr이다. ?findStr = abc라면 findsStr이라는 변수에 abc가 들어감
String findStr = request.getParameter("findStr");
EmpDao dao = new EmpDao();
//dao의 search라는 메소드 실행 findStr에 abc라는 값이 들어감, 그 실행결과가 list타입의 EmpVo타입의 반환형을 갖고 있는것
//List<EmpVo> search(String a)라는 메소드가 EmpDao안에 있겠구나라고 생각해야함
List<EmpVo> list = dao.search(findStr);
StringBuilder sb = new StringBuilder();
//%s-문자열(string), %d-정수형(digit), %c-문자(char), %f-실수(float)
String fmt = "<div class='emp'>"
+ " <div>사번:%d</div>"
+ " <div>성명:%s</div>"
+ " <div>이메일:%s</div>"
+ " <div>연락처:%s</div>"
+ " <div>급여:%10.1f</div>"
+ "</div>";
//리스트를 이런식으로 looping
for(EmpVo vo : list){//향상된 for문
String str = String.format(fmt, //fmt라는 포맷으로
vo.getEmployee_id(), //첫번째%d
vo.getFirst_name(), //두번째 %s
vo.getEmail(), //세번째 %s
vo.getPhone_number(), //네번째 %s
vo.getSalary() //다섯번째 %10.1f
);
sb.append(str);
//String : 고정문자열(탐색-메모리공간확보-저장의 프로세스라서 속도가 느림)
//stringbuilder나 buffer는 저장만함
}
out.print(sb.toString());
%>
EmpDao.java
package bean;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
//connection을 만들어서 처리하는 작업이 중요
public class EmpDao {
Connection conn; //db연결위한 connection개체
PreparedStatement ps; //sql날리기위해
ResultSet rs; //쿼리값결과 가져오는
//생성자 역할 & 모양
//1. 객체 생성~ 초기화
//2. 클래스명과 반드시 일치
//3. 리턴형이 없다 void사용x
public EmpDao() {
conn = new Application().getConn();
}
// Data Access Object: 데이터에 접근하는 것을 목적으로 하는 객체
//empvo타입만 저장해서 반환하겠다
public List<EmpVo> search(String findStr){ //abc라고 입력했다면 findStr = abc로 루핑
//<Interface>= <class>
//부모타입의 변수에 자식의 객체를 생성해 저장할 수 있는 형태(다형성)
List<EmpVo> list = new ArrayList<EmpVo>();
try {
String sql = " select * from hr.employees "
+ " where first_name like ? "
+ " or email like ? "
+ " or phone_number like ? ";
ps = conn.prepareStatement(sql);
ps.setString(1, "%" + findStr + "%");
ps.setString(2, "%" + findStr + "%");
ps.setString(3, "%" + findStr + "%"); //setstring: 문자열로 반환(문자열에 작은따옴표를 붙혀줌)
rs = ps.executeQuery();
while(rs.next()) {
EmpVo vo = new EmpVo();
vo.setEmployee_id(rs.getInt("employee_id"));
vo.setFirst_name(rs.getString("first_name"));
vo.setEmail(rs.getString("email"));
vo.setPhone_number(rs.getString("phone_number"));
vo.setSalary(rs.getDouble("salary"));
list.add(vo);
}
}catch(Exception ex) {
ex.printStackTrace();
}finally {
try {
conn.close(); //자원고갈되니까 닫아줘야함
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
}
EmpVo.java
package bean;
//control단은 없다
//value object
public class EmpVo {
int employee_id;
String first_name;
String email;
String phone_number;
double salary;
public int getEmployee_id() {
return employee_id;
}
public void setEmployee_id(int employee_id) {
this.employee_id = employee_id;
}
public String getFirst_name() {
return first_name;
}
public void setFirst_name(String first_name) {
this.first_name = first_name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone_number() {
return phone_number;
}
public void setPhone_number(String phone_number) {
this.phone_number = phone_number;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
application.java
package bean;
import java.sql.Connection;
import java.sql.DriverManager;
public class Application {
//DB 연결 소스
Connection conn;
public Application() {
try {
Class.forName("oracle.jdbc.driver.OracleDriver"); //메모리에 올리는 작업을 class.forname이 함
conn = DriverManager.getConnection(
"jdbc:oracle:thin:@localhost:1521:XE",
"system", "oracle"
); //oracle드라이버의 위치, 포트 등등 유저명, 암호 등을 사용해서 객체를 생성하면 커넥션 객체가 만들어짐
}catch(Exception ex) {
ex.printStackTrace();
}
}
public Connection getConn() {//getter만 만듬
return conn;
}
}
빨간부분만 새로고침됨
728x90
LIST
'Front > AJAX' 카테고리의 다른 글
| 헷갈려서 적는 ajax-controller 데이터 보내고 받는법 (0) | 2021.11.05 |
|---|---|
| status(요청상태) (0) | 2020.12.09 |
| 사원조회(JSON) (0) | 2020.12.09 |
| 사원조회(XML) (0) | 2020.12.09 |
| 정수확인test (0) | 2020.12.09 |
댓글