티스토리 뷰

WEB/ajax

[ajax] ajax 기초 예제 <select 배열을 이용한 예제>

춘햄 2021. 6. 8. 12:24

문제: #search 버튼 클릭시 ajaxCallTest4.jsp url로 ajax를 호출하여연관검색단어를 조회하여 #str에 출력.

단, ajax에 배열 형태를 넘겨야 하기 때문에 {'키[]' : 배열객체} 형식으로 데이터를 전달해야한다.

◎ 04_ajaxTest4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest4.html</title>

	<link rel="stylesheet" href="./css/search_words.css">
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/search_words.js"></script>
</head>

<body>
<!-- 
		문제4. #search 버튼 클릭시 ajaxCallTest4.jsp url로 ajax를 호출하여
		연관검색단어를 조회하여 #str에 출력.
		#str에 오는 배열값은 <option></option>로 감싸서 출력하면 된다.

		1) 축구 연관단어 : 축구공, 축구장, 잔디
		2) 수영 연관단어 : 수영장, 수영복, 물
		3) 게임 연관단어 : 컴퓨터, 게임, 키보드, 마우스
		4) ajax 배열 넘기는 방법
			!! select의 multiple 속성으로 설정 할 경우, 
			값을 가지고 올때 배열로 인식
			{'키[]' : 배열객체}
-->


	<h2> 연관검색단어를 조회 </h2>
	
	<div>
		<h1>취미</h1>
		<select id="types" multiple="multiple">
			<option value="축구">축구</option>
			<option value="수영">수영</option>
			<option value="게임">게임</option>		
		</select>
	</div>
	
	<div>
		<button type="button" id="search">연관단어검색 ▶</button>
	</div>
	
	<div>
		<h1>연관단어</h1>
		<select id="str" multiple="multiple"></select>
	</div>	
	
</body>
</html>

◎ search_words.js

/**
 * search_words.js
 */

$(document).ready(function() {
	$('#search').click(function() {
		var input = $('#types').val();
		
		var request = $.ajax({
			url: "ajaxCallTest4.jsp",
			method: "POST",
			data: {
				"types[]" : input
			},
			dataType: "json"
		});
		
		request.done(function(data){
			$('#str').children().remove();
			
			var array = data.result;
			var strObj = $('#str');
			strObj.html('');
			
			if(array != undefined && array.length > 0) {
				for(var i = 0; i < array.length; i++) {
					strObj.append('<option value ="' + array[i] + '">' + array[i] + '</option>');
				}
			}
			
		});
		
		request.fail(function(jqXHR, textStatus){
			alert("요청에 대한 응답이 실패했습니다. : " + textStatus);
		});
		
	});
});

◎ ajaxCallTest4.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
    			
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>

<% 	
	response.setContentType("application/json");
	response.setHeader("Content-Disposiont", "inline");

	
	// 키값이 배열이기 때문에 받아 올때도 배열을 받아서 와야 한다.
	// 배열을 받아올때는 getParameterValues를 이용해서 받아야한다.
	
	String[] str = request.getParameterValues("types[]");
	
	for(String s : str) {
		System.out.println(s);
	}
	
	List<String> list = new ArrayList<String>();
	
	for(int i = 0; i < str.length; i++) {
		if(str[i].equals("축구")){
			list.add("축구공");
			list.add("축구장");
			list.add("월드컵");
		} else if(str[i].equals("커피")){
			list.add("원두");
			list.add("카페");
			list.add("글라인더");
		} else if(str[i].equals("계절")){
			list.add("봄");
			list.add("여름");
			list.add("가을");
			list.add("겨울");
		}
	}
	
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("result", list);
	
	Gson g = new Gson();
	
	out.println(g.toJson(map));
	
%>

'WEB > ajax' 카테고리의 다른 글

[ajax] ajax 기초 예제 <input에 따른 배열 생성>  (0) 2021.06.08
[ajax] 비동기 요청 & 응답 기본 형식 정리  (0) 2021.06.07
[ajax] ajax 기초  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more