본문 바로가기
study/Ajax

[Ajax] 23. 시,군,도 출력하기 (doGet방식)

by 금이패런츠 2022. 5. 2.
728x90
반응형
package controller;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
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/seelct
@WebServlet("/select")
public class SelectServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	String si;
	String gu;
    public SelectServlet() {
        super();
    }
    //doGet : Get 방식 요청시 호출되는 메서드 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		
		// sido.txt 파일 읽기 
		BufferedReader fr = new BufferedReader(new FileReader(request.getServletContext().getRealPath("/") + "file/sido.txt"));
		si = request.getParameter("si"); //서울특별시
		gu = request.getParameter("gu"); //강남구
		System.out.println(si + "," + gu);
		// 중복된 내용을 제외하기 위해 LinkedHashSet 사용
		Set<String> set = new LinkedHashSet<>();
		String data = null;
		if (si == null && gu == null) { //  광역시, 도
			//data : 서울특별시 종로구 종로구 => 서울특별시 종로구 청운동
			while ((data = fr.readLine()) != null) {
				// \\s : 공백문자 여러개
				String[] arr = data.split("\\s+");
				//set : 중복방지
				if(arr.length >= 3) set.add(arr[0].trim()); //서울특별시 
			}
		} else if(gu ==null) {
			si = si.trim();
			while ((data = fr.readLine()) != null) {
				String[] arr = data.split("\\s+");
				if(arr.length >= 3 && arr[0].equals(si) && !arr[0].equals(arr[1])) {
					set.add(arr[1].trim());
				}
			}
		} else { //si, gu 파라미터가 둘다 존재하는 경우. null이 아닌 경우.
			si = si.trim();
			gu = gu.trim();
			while ((data = fr.readLine()) != null) {
				String[] arr = data.split("\\s+");
				if(arr.length >= 3 && arr[0].trim().equals(si) && arr[1].trim().equals(gu) && !arr[1].equals(arr[2])) {
					if(arr.length > 3) arr[2] += " " + arr[3];
					set.add(arr[2].trim());
				}
			}
		}
		//setContentType : 응답 내용의 형태 지정
		response.setContentType("text/plain; charset=utf-8");
		List<String> list = new ArrayList(set); //set 객체를 List 객체로 변경
		Collections.sort(list); 
		//Collections.sort(list) : List 객체 정렬 (가나다 순으로 정렬)
		//PrintWriter response.getWriter() : 문자형 출력스트림
		response.getWriter().println(list); //ajax의 결과 데이터로 출력
	}
	//doPost : Post 방식 요청시 호출되는 메서드 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%-- src/main/webapp/layout/kiclayout.jsp --%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html><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>
<script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
#center {
	text-align: center;
}
ul {
width : 100%;

}
.nav-item {
font-weight: 600;
font-size: 1.2em;
padding : 3px;
color: aqua;
}

#half {
	width: 45%;
}
nav {
    box-shadow: 0px 0px 3px 3px #EDEEED;
}

#shade {
  box-shadow: 0px 0px 3px 3px #EDEEED;
}
</style>
<%--원래 페이지 head 태그 내용을 설정 : title 태그는 제외 --%>
<sitemesh:write property='head'/>
</head>
<body>

	<nav class="navbar navbar-expand-lg bg-light navbar-light">
		<!-- Brand -->
		<a class="navbar-brand" href="${path}/member/main">
		<img src="${path}/image/logo.png"
			  style="margin-right: 20%;"></a>
		<!-- Links -->
		<ul class="navbar-nav   justify-content-end" >
			<li class="nav-item"><a
				href="${path}/board/list?boardid=1"
				class="nav-link">공지사항</a></li>
			<li class="nav-item"><a
				href="${path}/board/list?boardid=2"
				class="nav-link">자유게시판</a></li>
			<li class="nav-item"><a
				href="${path}/board/list?boardid=3"
				class="nav-link">QnA</a></li>
			<c:if test="${sessionScope.login == 'admin' }">	
			<li class="nav-item">
			  <a href="${path}/member/list" class="nav-link">회원리스트</a></li>
			</c:if>	
		</ul>

		<ul class="navbar-nav   justify-content-end text-right" >
		<c:if test="${empty sessionScope.login }">
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/loginForm">로그인</a></li>
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/memberInput">회원가입</a></li>
	    </c:if>			
		<c:if test="${!empty sessionScope.login }">
			   <li class="nav-item"><a class="nav-link"
					href="${path}/member/info?id=${login}">${login}</a></li>
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/logout">로그아웃</a></li>
				<li class="nav-item"><a class="nav-link"
					href="${path}/member/deleteForm?id=${sessionScope.login}">회원탈퇴</a></li>
	    </c:if>
	    </ul>			

		<div class="container  justify-content-end">
			<form class="form-inline" action="#">
				<input class="form-control mr-sm-2" type="text" placeholder="Search">
				<button class="btn btn-success" type="submit">Search</button>
			</form>
		</div>

	</nav><!-- The Modal -->
<sitemesh:write property='body'/>
<!-- Footer -->
<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>

<script type="text/javascript">
	let divid;
	let si;
	$(function() {
		$.ajax({
			url : "${path}/select",
			success : function(data) {
				console.log(data)
				/*
				 * [강원도, 경기도, 경상남도, 경상북도, 광주광역시, 대구광역시, 대전광역시, 부산광역시, 
				 * 서울특별시, 울산광역시, 인천광역시, 전라남도, 전라북도, 제주특별자치도, 충청남도, 충청북도]
				 */
				let arr = data.substring(data.indexOf('[')+1,data.indexOf(']')).split(",");
				$.each(arr,function(i,item){
					$("select[name='si']").append(function(){
						return "<option>" + item + "</option>"
					})
				});
			}
		})
	})
	
	function getText(name) {
		let cityval = $("select[name='si']").val();
		let guval = $("select[name='gu']").val();
		let disname;
		let toptext="구군을 선택하세요.";
		let params = "";
		if (name =="si") {
			params = "si=" + cityval.trim();
			disname = "gu"; //결과값이 출력 될 영역
		} else if (name == "gu") {
			// si = 서울특별수 & gu = 강남구
			params = "si=" + cityval.trim() + "&gu=" + guval.trim();
			disname = "dong";
			toptext = "동리를 선택하세요."
		} else {
			return;
		}
		$.ajax({
			url : "${path}/select",
			type : "POST",
			data : params,
			success : function(data) {
				let arr = data.substring(data.indexOf('[')+1,data.indexOf(']')).split(",");
				let selhtml = "<select name='" + disname + "' onchange='getText(\"" + disname + "\")'>";
				selhtml += "<option value=''>" + toptext + "</option>"
				$.each(arr,function(i,item){
					selhtml += "<option>" + item + "</option>"
				});
				selhtml += "</select>";
				$("#" + disname).html(selhtml);
			}
		})
	}
</script>

<br>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>KIC 캠퍼스 : 인공지능을 활용한 고객 맞춤형 웹 플랫폼 구축 양성 과정 </p>
</div>
</body>
</html>

sido.txt
0.72MB

728x90
반응형
저작자표시 비영리 변경금지

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

[Ajax] 26. 시,군,도 출력하기2 [(RestController) kiclayout.jsp, AjaxController.java]  (0) 2022.05.19
[Ajax] 26. Ajax를 이용하여 id 체크하기 [(회원가입)userEntry.jsp, AjaxController.java]  (0) 2022.05.19
[Ajax] 23. JSON 연습 ( Ajax폴더의 house.jsp를 이용하여 table 형태로 출력하기)  (0) 2022.04.28
[Ajax] 22. Ajax로 xml 예제2  (0) 2022.04.28
[Ajax] 23. Ajax를 이용한 로그인  (0) 2022.04.28

관련글

티스토리툴바