본문 바로가기
수업(국비지원)/Ajax

[AJAX] ajax - jquery 이용한 시,군,구 선택

by byeolsub 2023. 4. 21.

 📌 /jsp3/src/main/webapp/layout/kiclayout.jsp 내용추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%-- /jsp3/src/main/webapp/layout/kiclayout.jsp --%>
<!DOCTYPE html>
<html lang="en">
<head>
<title><sitemesh:write property='title' /></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<sitemesh:write property='head' />
</head>
<style>
#center {
	text-align: center;
}

#half {
	width: 45%;
}
</style>
<body>

	<nav class="navbar navbar-expand-sm bg-light navbar-light">
		<!-- Brand -->
		<a class="navbar-brand" href="#"> <img
			src="${path}/image/logo.png" width="80%"></a>

		<!-- Links -->
		<ul class="navbar-nav ">
			<c:if test="${empty sessionScope.login}">
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/joinForm">회원가입</a></li>
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/loginForm">로그인</a></li>
			</c:if>
			<c:if test="${!empty sessionScope.login}">
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/main">${sessionScope.login}님</a></li>
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/loginForm">로그아웃</a></li>
			</c:if>
			<!-- Dropdown -->
			<li class="nav-item dropdown"><a
				class="nav-link dropdown-toggle" href="#" id="navbardrop"
				data-toggle="dropdown"> 게시판 </a>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="${path}/board/list?boardid=1">공지사항</a>
					<a class="dropdown-item" href="${path}/board/list?boardid=2">자유게시판</a>
					<a class="dropdown-item" href="${path}/board/list?boardid=3">QnA</a>
				</div></li>

		</ul>
	</nav>
	<hr>
	<sitemesh:write property='body' />
	<hr>
	<div class="jumbotron text-center" style="margin-bottom: 0">
		<p>Footer</p>
		<%-- 시 군 구 선택 --%>
		<br> <span id="si"> <select name="si"
			onchange="getText('si')">
				<option value="">시도를 선택하세요</option>
		</select>
		</span> <span id="gu"> <select name="gu" onchange="getText('gu')">
				<option value="">구군을 선택하세요</option>
		</select>
		</span> <span id="dong"> <select name="dong">
				<option value="">동리를 선택하세요</option>
		</select>
		</span>
	</div>
	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
		
	</script>
	<script type="text/javascript">
		let divid
		let si
		//windo.onload와 기능 동일 = 문서가 준비 완료가 되면
		$(function() {
			$.ajax({
				url : "${path}/select",
				success : function(data) {
					/* data : 시도 목록을 저장하고 있는
					
					[서울특별시, 부산광역시, 대구광역시, 인천광역시, 광주광역시, 대전광역시, 울산광역시, 경기도, 
						강원도, 충청북도, 충청남도, 전라북도, 전라남도, 경상북도, 경상남도, 제주특별자치도]
					
					 */
					console.log(data)
					//arr : 시도 목록을 배열로 저장하고 있는 변수
					let arr = data.substring(data.indexOf('[') + 1,
							data.indexOf(']')).split(",")
					//$.each : ajax 함수 중 jquery 반목분.
					$.each(arr, function(i, item) { //i : 인덱스 값, item : 요소의 값. 서울특별시,부산광역시,...제주특별자치도
						$("select[name='si']").append(function() { //append : 태그 추가.
							return "<option>" + item + "</option>"
						})
					})
				}
			})
		})
		function getText(name) {
			//name : si => 두번째 select 값을 설정
			//name : gu => 세번째 select 값을 설정
			let disname
			if (name == 'si') { //jqeury 표현법
				/* 
				   $("select[name='si']") : <select name='si'>
				   val() : value 속성값
				   $("select[name='si']").val() : select 태그의 선택 된 값
				*/
				params = "si=" + $("select[name='si']").val();
				disname = "gu" //두번째 select 태그 선택할 수 있도록 값을 설정함.
				firstname ='구군을'
			} else if (name == 'gu') {
				params = "si=" + $("select[name='si']").val() 
				         + "&gu=" + $("select[name='gu']").val();
				disname = "dong" //세번째 select 태그 선택
				firstname = '동리를'
			}
			$.ajax({
				url : "${path}/select",
				type : "POST",
				data : params, //파라미터 값.
				success : function(data) {
					let arr = data.substring(data.indexOf('[') + 1, data.indexOf(']')).split(",")
					//출력할 select 태그 초기화
					$("select[name='"+ disname + "']").html("<option value=''>"+ firstname +"선택하세요</option>")
					$.each(arr, function(i, item) {
						$("select[name='" + disname + "']").append(function() { //append : 태그 추가.
							return "<option>" + item + "</option>"
						})
					})
				}
			})
		}
	</script>
</body>
</html>
 

📌 SelectServlet

package controller;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.LinkedHashSet;
import java.util.List;
import java.util.Set;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//http://localhost:8088/jsp3/select
// kiclayout.jsp 에서 ajax로 요청 되는 페이지
@WebServlet("/select")
public class SelectServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private String si;
	private String gu;
    public SelectServlet() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		/* BufferedReader : (문자형 입력 스트림) 필터드 입력스트림.
		                   입력 스트림에 버퍼를 할당 하여 성능을 높일 수 있는 스트림.
		                   readLine() 메서드를 멤버로 가짐.
		                   
		   FileReader : 파일로부터 문자형 데이터를 읽기 위한 스트림.                
		*/                 
		BufferedReader fr = new BufferedReader(new FileReader(request.getServletContext().getRealPath("/") + "file/sido.txt"));
		si = request.getParameter("si");
		gu = request.getParameter("gu");
		//LinkedHashSet : 추가한 순서를 유지. 중복 불가. 
		Set<String> set = new LinkedHashSet<>(); 
		String data = null;
		if(si == null && gu == null) {
			//data : 서울특별시 종로구  종로구
			while((data = fr.readLine()) != null) {
				/* split : 분리 시키는...
				        \\\\s+ : 정규화식. 공백 문자 한개 이상 의미
				        \\\\s : 공백 정규식으로 표현
				        + : 1개 이상.
				       
				        arr[0] : 서울 특별시
				        arr[1] : 종로구
				        arr[2] : 종로구
				 */
				String[] arr = data.split("\\\\s+");
				if(arr.length >= 3) set.add(arr[0].trim());
			}
		} else if(gu == null) { //si 파라미터 존재.
			si = si.trim();
			while((data = fr.readLine()) != null) {
				String[] arr = data.split("\\\\s+");
				//si : 서울특별시 
				if(arr.length >= 3 && arr[0].equals(si) && !arr[0].equals(arr[1])) {
					set.add(arr[1].trim()); //구에 해당하는 정보만 set에 저장
				}
			}
		} else { //si,gu 파라미터 둘다 존재하는 경우.
			si = si.trim();
			gu = gu.trim();
			while((data = fr.readLine()) != null) {
				String[] arr = data.split("\\\\s+");
				if(arr.length >= 3 && arr[0].equals(si) && arr[1].equals(gu) && !arr[0].equals(arr[1]) && !arr[1].equals(arr[2])) {
					if(arr.length > 3) arr[2] += " " + arr[3]; //예 : 경기도 수원시 장안구 연무동 같이 4개짜리가 있을 수 있으므로 
					set.add(arr[2].trim()); //동에 해당하는 정보만 set에 저장
				}
			}
		}
		//setContentType() : 브라우저에 알려주는
		//text/plain : 순수 문자열
		//charset=utf-8 : 한글을 인식 할 수 있도록하는
		response.setContentType("text/plain; charset=utf-8");
		List<String> list = new ArrayList<>(set);
    Collections.sort(list); //정렬
		//getWriter() : 문자형 출력 스트림
		response.getWriter().println(list);
		}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

저작자표시 비영리 변경금지 (새창열림)

'수업(국비지원) > Ajax' 카테고리의 다른 글

[AJAX] chartjs - 그래프 그리기  (0) 2023.04.21
[AJAX] Exam 시도군 선택  (0) 2023.04.21
[AJAX] jquery를 이용한 ajax 연습  (0) 2023.04.21
[AJAX] FETCH 함수 - ajax.js 이용, jquery ajax 파라미터 전송  (0) 2023.04.21
[AJAX] FETCH 함수 - JSON  (0) 2023.04.21

관련글

티스토리툴바