티스토리 뷰

WEB/ajax

[ajax] ajax 기초 예제 <input에 따른 배열 생성>

춘햄 2021. 6. 8. 11:25

ajax 이해를 위한 3번째 예제이다.

버튼 클릭시, 선택창에서 선택된 숫자만큼의 크기를 갖는 배열(List)을 반환하여 #myName에 출력하는 기본적인 문제이다.

(JS 폴더 내에 jQuery 코드를 따로 작성하여 html 에서 로드하는 방식으로 풀이하였다.)

◎ 03_ajaxTest3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest3.html</title>
	
	<!--
		문제3. #call 버튼 클릭시, #num의 선택된 숫자만큼의 크기를 
		갖는 배열(List)을 반환하여 #myName에 출력.
	-->
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/ajax_array_size.js"></script>
</head>

<body>

	<select id="num">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>
	
	<button type="button" id="call">배열크기 전송</button>
	
	<div id="myName"></div>
	
</body>
</html>

◎ ajax_array_size.js

/**
 * ajax_array_size.js
 */
$(document).ready(function() {
		
	$('#call').click(function() {
		var input = $('#num').val();
		console.log(input);
		
		var request = $.ajax({  
			url: "ajaxCallTest3.jsp",
			method: "POST",
			data: {
				num1: input
			},
			dataType: "json"
		});
		
		request.done(function(data){ 
			console.log(data);
			
			$('#myName').empty();
			
			for(var i = 0; i <data.result.length; i++) {
				$('#myName').append('<div>' + data.result[i] + '</div>');
			}
		});
		
		request.fail(function(jqXHR, textStatus){
			alert("요청에 대한 응답이 실패했습니다. : " + textStatus);
		});
		
	});
	
});

◎ ajaxCallTest3.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<% 	
/*		
		문제3. #call 버튼 클릭시 #num의 선택된 숫자만큼의 크기를 갖는 
		배열(자신이름이 값)을 반환하여 #myName에 html 출력.
		
		1) num1 파라미터를 받아 해당 숫자 만큼 반복을 하여 
		    자신의 이름을 저장하고 저장한 객체를 반환.
		2) List<String> myName = new ArrayList<String>(); 
		    리스트 객체 생성하고 
		    이 객체에 저장하여 myName을 반환하면 된다.
		3) List 객체.add(객체); -> 배열과 다르게 크기가 지정되어 있지 않다. 
		    add메서드를 활용해서 객체를 추가 할 수 있으며 
		    자동 인덱스가 증가된다.
			ex) myName.add("이름");
			
		4) List 객체.get(index); -> List에 저장된 내용을 
		   인덱스 매개변수로 가지고 올 수 있다.
*/
	response.setContentType("application/json");
	response.setHeader("Content-Disposiont", "attachment");
	
	String n = request.getParameter("num1");
	System.out.println("num1 : " + n);
	
	if(n == null || n.equals("")) {
		n = "0";
	}
	
	int num = Integer.parseInt(n);
	
	List<String> myName = new ArrayList<String>(); 
	
	for(int i = 0; i < num; i++){
		myName.add("List Index =>" + i);
	}
	
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("result", myName);
	
	Gson g = new Gson();
	
	out.println(g.toJson(map));
	
	
%>

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

[ajax] ajax 기초 예제 <select 배열을 이용한 예제>  (0) 2021.06.08
[ajax] 비동기 요청 & 응답 기본 형식 정리  (0) 2021.06.07
[ajax] ajax 기초  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more