728x90
★ 주소록 조회
- AJAX, JSON 을 이용한 방법
■ 필요 파일
- com.test.ajax > "Ex09.java"
- view ? "ex09.jsp"
- com.test.ajax > "Ex09Data.java"
- com.test.ajax > "ZipCode.java"
■ 소스코드
- Ex09.java
- ex09.jsp를 열기위한 Servlet 구현 파일
package com.test.ajax;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex09.do")
public class Ex09 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Ex09.java
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex09.jsp");
dispatcher.forward(req, resp);
}
}- ex09.jsp
- 실제적인, UI 및 JavaScirpt, AJAX 구문이 담긴 파일
- 엔터 키가 눌리면, btn1이 클릭 되도록 함.
- address1의 목록이 변경이 될 시, address2의 포커스로 둠
- btn1이 클릭시, ajax가 실행 된다.
- url : /ajax/ex09data.do로 이동
- dataType : json으로, each문을 통해, 해당 컬럼의 수에 대해 option값을 넣는 구문
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>
</style>
</head>
<body>
<h1>우편번호 검색</h1>
<table>
<tr>
<th>검색어(동입력)</th>
<td>
<input type="text" id="dong" class="short">
<input type="button" id="btn1" value="검색하기">
</td>
</tr>
<tr>
<th>주소</th>
<td>
<select id="address1">
<option value="0">검색해주세요.</option>
</select>
</td>
</tr>
<tr>
<th>상세주소</th>
<td><input type="text" id="address2"></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$('#dong').keydown(()=> {
if (event.keyCode == 13) {
$('#btn1').click(); //에뮬레이터 함수
}
});
$('#address1').change(()=>{
$('#address2').focus();
});
$('#btn1').click(()=> {
$('#address1').html('');
$.ajax({
type: 'GET',
url: '/ajax/ex09data.do',
data:'dong=' + $('#dong').val(),
dataType: 'json',
success: (result)=>{
$(result).each((index, item) => {
$('#address1').append(
`
<option value=''>\${item}</option>
`
);
});
},
error: (a,b,c)=>console.log(a,b,c)
});
});
</script>
</body>
</html>- Ex09Data.java
- json 구문이 들어가는 파일
- dao파일에 있는 데이터베이스를 가져와, List 배열에 넣어 for문을 통해 해당 컬럼들을 writer함
package com.test.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex09data.do")
public class Ex09Data extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Ex09Data.java
String dong = req.getParameter("dong");
AjaxDAO dao = new AjaxDAO();
List<ZipCode> list = dao.search(dong);
/*
[
"[012-345] 서울시 강남구 역삼동",
"[012-345] 서울시 강남구 역삼동",
"[012-345] 서울시 강남구 역삼동",
"[012-345] 서울시 강남구 역삼동",
"[012-345] 서울시 강남구 역삼동"
]
*/
resp.setContentType("application/json");
resp.setCharacterEncoding("UTF-8");
PrintWriter writer = resp.getWriter();
String temp = "[";
for(ZipCode dto : list) {
temp += String.format("\"[%s] %s %s %s %s\","
, dto.getZip()
, dto.getSido()
, dto.getGugun()
, dto.getDong()
, dto.getBunji());
}
temp = temp.substring(0, temp.length()-1);
temp += "]";
writer.print(temp);
writer.close();
}
}- Zipcode.java
- Zipcode에 해당하는 DTO가 담긴 파일
package com.test.ajax;
import lombok.Data;
@Data
public class ZipCode {
private String zip;
private String sido;
private String gugun;
private String dong;
private String bunji;
}- DAO.java
- 해당 데이터베이스 구문을 가져오는 파일
public List<ZipCode> search(String dong) {
try {
String sql = "select * from zipcode "
+ "where dong like '%' || ? || '%'";
pstat = conn.prepareStatement(sql);
pstat.setString(1, dong);
rs = pstat.executeQuery();
List<ZipCode> list = new ArrayList<ZipCode>();
while (rs.next()) {
ZipCode dto = new ZipCode();
dto.setZip(rs.getString("zip"));
dto.setSido(rs.getString("sido"));
dto.setGugun(rs.getString("gugun"));
dto.setDong(rs.getString("dong"));
dto.setBunji(rs.getString("bunji"));
list.add(dto);
}
return list;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
■ 실행 결과
728x90
'Server' 카테고리의 다른 글
| AJAX STEP 7 - 테이블 저장 AJAX (0) | 2023.05.17 |
|---|---|
| AJAX STEP 6 - 다양한 전송 방법 (2) | 2023.05.17 |
| AJAX STEP 4 - ID 중복 검사 (0) | 2023.05.16 |
| AJAX STEP 3 - Real AJAX 구현 (1) | 2023.05.16 |
| AJAX STEP 2 - Push Server (0) | 2023.05.15 |
