231124_SPRING 2 (3-1)

		
		<br />
		
		<h3>8. 파일업로드 폼 방식 요청 처리</h3>
		<hr />
		
		<p>3) 파일 업로드 폼 파일 요소값과 텍스트 필드 요소값을 MultipartFile 매개변수와 자바빈즈 매개변수로 처리한다.</p>
		<form action="/registerFile03" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="picture" /><br />
			<button type="submit">업로드</button>
		</form>

[pom.xml]

		<!--  
			파일 업로드를 처리하기 위한 라이브러리 의존 관계 정의
		-->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>

[web.xml]

	<!--  
		MultipartFilter 적용 : 파일 업로드를 위한 필터 적용
		- MultipartFilter의 역할은 들어온 요청이 multipart/form-data 유형의 요청인지를 확인하여 multipart 형태의 요청이면
		MultipartResolver를 통해 multipart 요청을 확인한다.
		그리고 해당 요청이 적절한 요청이면 MultipartHttpServletRequest로 랩핑한다.
		- MultipartFilter의 기본 빈 이름은 'filterMultipartResolver'이다.
	-->
	<filter>
		<filter-name>MultipartFilter</filter-name>
		<filter-class>org.springframework.web.multipart.support.MultipartFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>MultipartFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	/*
	 * 		8. 파일 업로드 폼 방식 요청 처리
	 * 
	 * 			- 파일 업로드 폼 방식 요청 처리를 위한 의존 라이브러리 추가
	 * 			- pom.xml 내, commons-fileupload, commons-io 라이브러리 의존관계 등록
	 * 			- web.xml 에 모든 경로에 대한 MulripartFilter를 등록
	 */
	
	// 3) 파일 업로드 폼 파일 요소값과 텍스트 필드 요소값을 MultipartFile 매개변수와 자바빈즈 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile03", method = RequestMethod.POST)
	public String registerFile03(Member member, MultipartFile picture) {
		log.info("registerFile03() 실행...!");
		log.info("member.userId : " + member.getUserId());
		log.info("member.password : " + member.getPassword());
		
		log.info("originalName : " + picture.getOriginalFilename());
		log.info("size : " + picture.getSize());
		log.info("contentType : " + picture.getContentType());
		
		return "success";
	}

- http://localhost/registerForm

---

[context.xml]

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
--><!-- The contents of this file will be loaded for each web application -->
<Context allowCasualMultipartParsing="true" path="/">

    <!-- Default set of monitored resources. If one of these changes, the    -->
    <!-- web application will be reloaded.                                   -->
    <WatchedResource>WEB-INF/web.xml</WatchedResource>
    <WatchedResource>WEB-INF/tomcat-web.xml</WatchedResource>
    <WatchedResource>${catalina.base}/conf/web.xml</WatchedResource>

    <!-- Uncomment this to disable session persistence across Tomcat restarts -->
    <!--
    <Manager pathname="" />
    -->
</Context>

* 중간에 서버 초기화 되면 루트 경로를 다시 잡아줘야 함.

---

- http://localhost/registerForm

---

		<p>4) 파일 업로드 폼 파일 요소값과 텍스트 필드 요소값을 FileMember 타입의 자바빈즈 매개변수로 처리한다.</p>
		<form action="/registerFile04" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="picture" /><br />
			<button type="submit">업로드</button>
		</form>

[FileMember.java]

package kr.or.ddit.vo;

import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

@Data
public class FileMember {

	private String userId;
	private String password;
	private MultipartFile picture;
	
}

	// 4) 파일 업로드 폼 파일 요소값과 텍스트 필드 요소값을 FileMember 타입의 자바빈즈 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile04", method = RequestMethod.POST)
	public String registerFile04(FileMember fileMember) {
		log.info("registerFile04() 실행...!");
		log.info("fileMember.userId : " + fileMember.getUserId());
		log.info("fileMember.password : " + fileMember.getPassword());
		
		MultipartFile picture = fileMember.getPicture();
		
		log.info("originalName : " + picture.getOriginalFilename());
		log.info("size : " + picture.getSize());
		log.info("contentType : " + picture.getContentType());
		
		return "success";
	}

- http://localhost/registerForm

---

		<p>5) 여러 개의 파일업로드를 폼 파일 요소값으로 여러 개의 MultipartFile 매개변수로 처리한다.</p>
		<form action="/registerFile05" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="picture" /><br />
			<input type="file" name="picture2" /><br />
			<button type="submit">업로드</button>
		</form>

	// 5) 여러 개의 파일업로드를 폼 파일 요소값으로 여러 개의 MultipartFile 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile05", method = RequestMethod.POST)
	public String registerFile05(MultipartFile picture, MultipartFile picture2) {
		log.info("registerFile05() 실행...!");
		
		log.info("originalName : " + picture.getOriginalFilename());
		log.info("size : " + picture.getSize());
		log.info("contentType : " + picture.getContentType());
		
		log.info("originalName2 : " + picture2.getOriginalFilename());
		log.info("size2 : " + picture2.getSize());
		log.info("contentType2 : " + picture2.getContentType());
		
		return "success";
	}

- http://localhost/registerForm

---

		<p>6) 여러 개의 파일업로드를 폼 파일 요소값으로 MultipartFile 타입의 요소를 가진 리스트 컬렉션 타입 매개변수로 처리한다.</p>
		<form action="/registerFile06" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="pictureList[0]" /><br />
			<input type="file" name="pictureList[1]" /><br />
			<button type="submit">업로드</button>
		</form>
		
		<p>7) 여러 개의 파일업로드를 폼 파일 요소값과 텍스트 필트 요소값을 MultiFileMember 타입의 자바빈즈 매개변수로 처리한다.</p>
		<form action="/registerFile07" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="pictureList" multiple="multiple" /><br />
			<button type="submit">업로드</button>
		</form>

[MultipartFileMember.java]

package kr.or.ddit.vo;

import java.util.List;

import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

@Data
public class MultipartFileMember {

	private String userId;
	private String password;
	private List<MultipartFile> pictureList;
	
}

	// 6) 여러 개의 파일업로드를 폼 파일 요소값으로 MultipartFile 타입의 요소를 가진 리스트 컬렉션 타입 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile06", method = RequestMethod.POST)
	public String registerFile06(List<MultipartFile> pictureList) {
		log.info("registerFile06() 실행...!");
		log.info("pictureList.size() : " + pictureList.size());
		
		for(int i = 0; i < pictureList.size(); i++) {
			MultipartFile picture = pictureList.get(i);
			log.info("originalName["+i+"] : " + picture.getOriginalFilename());
			log.info("size["+i+"] : " + picture.getSize());
			log.info("contentType["+i+"] : " + picture.getContentType());
		}
		
		return "success";
	}
	
	// 7) 여러 개의 파일업로드를 폼 파일 요소값과 텍스트 필트 요소값을 MultiFileMember 타입의 자바빈즈 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile07", method = RequestMethod.POST)
	public String registerFile07(MultipartFileMember multipartFileMember) {
		log.info("registerFile07() 실행...!");
		List<MultipartFile> pictureList = multipartFileMember.getPictureList();
		log.info("pictureList.size() : " + pictureList.size());
		
		for(int i = 0; i < pictureList.size(); i++) {
			MultipartFile picture = pictureList.get(i);
			log.info("originalName["+i+"] : " + picture.getOriginalFilename());
			log.info("size["+i+"] : " + picture.getSize());
			log.info("contentType["+i+"] : " + picture.getContentType());
		}
		
		return "success";
	}

- http://localhost/registerForm

	// 6) 여러 개의 파일업로드를 폼 파일 요소값으로 MultipartFile 타입의 요소를 가진 리스트 컬렉션 타입 매개변수로 처리한다.
	//		파일 업로드도 마찬가지로 List로는 데이터를 바인딩할 수 없다.
	@RequestMapping(value = "/registerFile06", method = RequestMethod.POST)
	public String registerFile06(List<MultipartFile> pictureList) {
		log.info("registerFile06() 실행...!");
		log.info("pictureList.size() : " + pictureList.size());
		
		for(int i = 0; i < pictureList.size(); i++) {
			MultipartFile picture = pictureList.get(i);
			log.info("originalName["+i+"] : " + picture.getOriginalFilename());
			log.info("size["+i+"] : " + picture.getSize());
			log.info("contentType["+i+"] : " + picture.getContentType());
		}
		
		return "success";
	}

---

---

		<p>8) 파일업로드 폼 파일 요소값과 텍스트 필드 요소값을 MultipartFile 타입의 배열 매개변수로 처리한다.</p>
		<form action="/registerFile08" method="post" enctype="multipart/form-data">
			userId : <input type="text" name="userId" /><br />
			password : <input type="text" name="password" /><br />
			<input type="file" name="pictureArray" multiple="multiple" /><br />
			<button type="submit">업로드</button>
		</form>

	// 8) 파일업로드 폼 파일 요소값과 텍스트 필드 요소값을 MultipartFile 타입의 배열 매개변수로 처리한다.
	@RequestMapping(value = "/registerFile08", method = RequestMethod.POST)
	public String registerFile08(MultipartFile[] pictureArray) {
		log.info("registerFile08() 실행...!");
		log.info("pictureArray.length : " + pictureArray.length);
		
		for(int i = 0; i < pictureArray.length; i++) {
			MultipartFile picture = pictureArray[i];
			log.info("originalName["+i+"] : " + picture.getOriginalFilename());
			log.info("size["+i+"] : " + picture.getSize());
			log.info("contentType["+i+"] : " + picture.getContentType());
		}
		
		return "success";
	}

- http://localhost/registerForm

---

┌───────────────────────────────────────
│	실전 스프링 웹 개발
│	:: 2023-11-24
└───────────────────────────────────────

	[ 3장 : 컨트롤러 요청 매핑 ]
	
	- package : kr.or.ddit.controller.board
	- class : BoardController
	
	[ 4장 : 컨트롤러 응답 ]
	
	- package : kr.or.ddit
	- class : HomeController, RestHomeController
	
	[ 5장 : 컨트롤러 요청 처리 ]
	
	- package : kr.or.ddit.controller.member
	- class : MemberController
	
	- package : kr.or.ddit.controller.member
	- class : AjaxMemberController

[AjaxMemberController.java]

package kr.or.ddit.controller.member;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
@RequestMapping("/ajax")
public class AjaxMemberController {

	/*
	 * 		9. Ajax 방식 요청 처리
	 */
	
	// Ajax 방식 요청 처리 페이지
	@RequestMapping(value = "/registerForm", method = RequestMethod.GET)
	public String ajaxRegisterForm() {
		log.info("ajaxRegisterForm() 실행...!");
		return "member/ajaxRegisterForm";
	}
	
}

[ajaxRegisterForm.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			var registerBtn03 = $("#registerBtn03");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
		});
	</script>
</html>

package kr.or.ddit.controller.member;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
@RequestMapping("/ajax")
public class AjaxMemberController {

	/*
	 * 		9. Ajax 방식 요청 처리
	 */
	
	// Ajax 방식 요청 처리 페이지
	@RequestMapping(value = "/registerForm", method = RequestMethod.GET)
	public String ajaxRegisterForm() {
		log.info("ajaxRegisterForm() 실행...!");
		return "member/ajaxRegisterForm";
	}
	
	// 3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다
	@ResponseBody
	@RequestMapping(value = "/register03", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister03(
			@RequestBody Member member){
		
		log.info("ajaxRegister03() 실행...!");
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}
	
}

- http://localhost/ajax/registerForm

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
		<p>4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
		<button type="button" id="registerBtn04">registerBtn04</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var registerBtn03 = $("#registerBtn03");
			var registerBtn04 = $("#registerBtn04");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn04.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register04",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
		});
	</script>
</html>

	// 4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.
	@ResponseBody
	@RequestMapping(value = "/register04", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister04(String userId, String password){
		
		log.info("ajaxRegister04() 실행...!");
		log.info("userId : " + userId);
		log.info("password : " + password);
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

- http://localhost/ajax/registerForm

---

	// 4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.
	@ResponseBody
	@RequestMapping(value = "/register04", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister04(String userId, String password){
		
		// 요청 본문에서 데이터가 바인딩되지 않아 userId가 null이 나온다.
		// 요청 본문에서 데이터를 가져오려면 @RequestBody 어노테이션을 꼭 붙여 주어야 한다.
		// 그래서, 단일 데이터를 컨트롤러 메서드에서 값으로 받기 위해서는 기본 타입 변수를 사용하지 않고
		// 컬렉션 Map을 활용하도록 한다. (이 때에도 @RequestBody는 필수겠죠?)
		log.info("ajaxRegister04() 실행...!");
		log.info("userId : " + userId);
		log.info("password : " + password);
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
		<p>4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
		<button type="button" id="registerBtn04">registerBtn04</button>
		
		<p>5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn05">registerBtn05</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var registerBtn03 = $("#registerBtn03");
			var registerBtn04 = $("#registerBtn04");
			var registerBtn05 = $("#registerBtn05");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn04.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register04",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn05.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register05?userId=" + userId,
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
		});
	</script>
</html>

	// 5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.
	@ResponseBody
	@RequestMapping(value = "/register05", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister05(String userId, String password){
		
		log.info("ajaxRegister05() 실행...!");
		log.info("userId : " + userId);
		log.info("password : " + password);
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

- http://localhost/ajax/registerForm

* 헤더에서 꺼낸 정보를 가져온 것임. 기본 타입형으로는 여전히 꺼낼 수 없다.

---

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
		<p>4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
		<button type="button" id="registerBtn04">registerBtn04</button>
		
		<p>5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn05">registerBtn05</button>
		
		<p>7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @RequestBody 어노테이션을 지정하여 처리한다.</p>
		<button type="button" id="registerBtn07">registerBtn07</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var registerBtn03 = $("#registerBtn03");
			var registerBtn04 = $("#registerBtn04");
			var registerBtn05 = $("#registerBtn05");
			var registerBtn07 = $("#registerBtn07");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn04.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register04",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn05.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register05?userId=" + userId,
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn07.on("click", function(){
				var userObjectArray = [
					{
						userId : "name01",
						password : "pw1"
					},
					{
						userId : "name02",
						password : "pw2"
					}
				];
				
				$.ajax({
					type : "post",
					url : "/ajax/register07",
					data : JSON.stringify(userObjectArray),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
		});
	</script>
</html>

	// 7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @RequestBody 어노테이션을 지정하여 처리한다.
	@ResponseBody
	@RequestMapping(value = "/register07", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister07(
			@RequestBody List<Member> memberList
			){
		
		log.info("ajaxRegister07() 실행...!");
		for(Member member : memberList) {
			log.info("member.userId : " + member.getUserId());
			log.info("member.password : " + member.getPassword());
		}
		
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

- http://localhost/ajax/registerForm

	// 7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @RequestBody 어노테이션을 지정하여 처리한다.
	@ResponseBody
	@RequestMapping(value = "/register07", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister07(
			@RequestBody List<Member> memberList
			){
		
		// 비동기 처리시, List 컬렉션으로 데이터를 받을 때에는 @RequestBody라는 어노테이션을 이용하여 바인딩한다.
		// 동기 처리시에는 컨트롤러 메서드 내에서 List 타입으로 값을 바인딩할 수 없지만, 객체 내 존재하는 List 타입으로는 데이터를 바인딩할 수 있다.
		// 동기와 비동기 처리시의 차이점을 꼭 기억하자!
		log.info("ajaxRegister07() 실행...!");
		for(Member member : memberList) {
			log.info("member.userId : " + member.getUserId());
			log.info("member.password : " + member.getPassword());
		}
		
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
		<p>4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
		<button type="button" id="registerBtn04">registerBtn04</button>
		
		<p>5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn05">registerBtn05</button>
		
		<p>7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @RequestBody 어노테이션을 지정하여 처리한다.</p>
		<button type="button" id="registerBtn07">registerBtn07</button>
		
		<p>8) 중첩된 객체 타입의 JSON 요청 데이터를 @RequestBosy 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn08">registerBtn08</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var registerBtn03 = $("#registerBtn03");
			var registerBtn04 = $("#registerBtn04");
			var registerBtn05 = $("#registerBtn05");
			var registerBtn07 = $("#registerBtn07");
			var registerBtn08 = $("#registerBtn08");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn04.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register04",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn05.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register05?userId=" + userId,
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn07.on("click", function(){
				var userObjectArray = [
					{
						userId : "name01",
						password : "pw1"
					},
					{
						userId : "name02",
						password : "pw2"
					}
				];
				
				$.ajax({
					type : "post",
					url : "/ajax/register07",
					data : JSON.stringify(userObjectArray),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn08.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password,
					address : {
						postCode : "010908",
						location : "Daejeon"
					}
				}; 
				
				$.ajax({
					type : "post",
					url : "/ajax/register08",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
		});
	</script>
</html>

	// 8) 중첩된 객체 타입의 JSON 요청 데이터를 @RequestBosy 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다.
	@ResponseBody
	@RequestMapping(value = "/register08", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister08(
			@RequestBody Member member
			){
		
		log.info("ajaxRegister08() 실행...!");
		log.info("member.userId : " + member.getUserId());
		log.info("member.password : " + member.getPassword());
		
		Address address = member.getAddress();
		if(address != null) {
			log.info("address.postCode : " + address.getPostCode());
			log.info("address.location : " + address.getLocation());
		}else {
			log.info("address is null.");
		}
		
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

- http://localhost/ajax/registerForm

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>Ajax 방식 요청 처리</h3>
		<hr />
		
		<form>
			userId : <input type="text" name="userId" id="userId" /><br />
			password : <input type="text" name="password" id="password" /><br />
		</form><br />
		
		<p>3) 객체 타입의 JSON 요청 데이터 @RequestBody 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn03">registerBtn03</button>
		
		<p>4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
		<button type="button" id="registerBtn04">registerBtn04</button>
		
		<p>5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn05">registerBtn05</button>
		
		<p>7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @RequestBody 어노테이션을 지정하여 처리한다.</p>
		<button type="button" id="registerBtn07">registerBtn07</button>
		
		<p>8) 중첩된 객체 타입의 JSON 요청 데이터를 @RequestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다.</p>
		<button type="button" id="registerBtn08">registerBtn08</button>
		
		<p>9) 중첩된 객체 타입의 JSON 요청 데이터를 @RequestBody 어노테이션을 지정하여 컬렉션 리스트 매개변수로 처리한다.(객체 안에 들어 있는 리스트 변수)</p>
		<button type="button" id="registerBtn09">registerBtn09</button>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var registerBtn03 = $("#registerBtn03");
			var registerBtn04 = $("#registerBtn04");
			var registerBtn05 = $("#registerBtn05");
			var registerBtn07 = $("#registerBtn07");
			var registerBtn08 = $("#registerBtn08");
			var registerBtn09 = $("#registerBtn09");
			
			registerBtn03.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register03",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn04.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register04",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn05.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password
				};
				
				$.ajax({
					type : "post",
					url : "/ajax/register05?userId=" + userId,
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn07.on("click", function(){
				var userObjectArray = [
					{
						userId : "name01",
						password : "pw1"
					},
					{
						userId : "name02",
						password : "pw2"
					}
				];
				
				$.ajax({
					type : "post",
					url : "/ajax/register07",
					data : JSON.stringify(userObjectArray),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn08.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password,
					address : {
						postCode : "010908",
						location : "Daejeon"
					}
				}; 
				
				$.ajax({
					type : "post",
					url : "/ajax/register08",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
			registerBtn09.on("click", function(){
				var userId = $("#userId").val();
				var password = $("#password").val();
				
				var userObject = {
					userId : userId,
					password : password,
					cardList : [
						{
							no : "12345",
							validMonth : "20221018"
						},
						{
							no : "67890",
							validMonth : "20221019"
						}
					]
				}; 
				
				$.ajax({
					type : "post",
					url : "/ajax/register09",
					data : JSON.stringify(userObject),
					contentType : "application/json; charset=utf-8",
					success : function(result){
						console.log(result);
						if(result === "SUCCESS") {
							alert(result);
						}
					}
				});
			});
			
		});
	</script>
</html>

	// 9) 중첩된 객체 타입의 JSON 요청 데이터를 @RequestBody 어노테이션을 지정하여 컬렉션 리스트 매개변수로 처리한다.(객체 안에 들어 있는 리스트 변수)
	@ResponseBody
	@RequestMapping(value = "/register09", method = RequestMethod.POST)
	public ResponseEntity<String> ajaxRegister09(
			@RequestBody Member member
			){
		
		log.info("ajaxRegister09() 실행...!");
		log.info("member.userId : " + member.getUserId());
		log.info("member.password : " + member.getPassword());
		
		List<Card> cardList = member.getCardList();
		
		if(cardList != null && cardList.size() > 0) {
			log.info("cardList.size() : " + cardList.size());
			for(Card card : cardList) {
				log.info("card.no : " + card.getNo());
				log.info("card.validMonth : " + card.getValidMonth());
			}
		}else {
			log.info("cardList is null.");
		}
		
		return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		
	}

- http://localhost/ajax/registerForm

---

[AjaxMemberFileController.java]

package kr.or.ddit.controller.member;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
@RequestMapping("/ajax")
public class AjaxMemberFileController {

	/*
	 * 		10. 파일 업로드 Ajax 방식 요청 처리
	 */
	
	// 파일 업로드 Ajax 방식 요청 처리 페이지
	@RequestMapping(value = "/registerFileForm", method = RequestMethod.GET)
	public String ajaxRegisterFileForm() {
		log.info("ajaxRegisterFileForm() 실행...!");
		return "member/ajaxRegisterFile";
	}
	
}

[ajaxRegisterFile.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>파일 업로드 Ajax 방식 요청 처리</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		
		<h3>10. 파일 업로드 Ajax 방식 요청 처리</h3>
		<hr />
		
		<p>Ajax 방식으로 전달할 파일 요소값을 스프링 MVC가 지원하는 MultipartFile 매개변수로 처리한다.</p>
		<div>
			<input type="file" id="inputFile" /><br />
			<hr />
			<img id="preview" />
		</div>
		
	</body>
	<script type="text/javascript">
		$(function(){
			
			var inputFile = $("#inputFile");
			
			inputFile.on("change", function(event){
				console.log("change...!");
				
				var files = event.target.files;
				var file = files[0];
				
				console.log("file : " + file);
				
				// formData 는 key = value 형식으로 데이터가 저장된다. (append 메서드를 이용해서 작성한다)
				// dataType : 응답(response) 데이터를 내보낼 때 보내줄 데이터 타입
				// processData : 데이터 파라미터를 data라는 속성으로 넣는데, 제이쿼리 내부적으로 쿼리스트링을 구성한다.
				//				파일 전송의 경우 쿼리스트링을 사용하지 않으므로 해당 설정을 false로 비활성화 한다.
				// contentType : Content-Type을 설정 시 사용하는데, 해당 설정의 기본값은
				//				'application/x-www-form-urlencoded; charset=utf-8'이다.
				//				 하여, 기본값으로 나가지 않고, 'multipart/form-data'로 나갈 수 있도록 설정을 false로 한다.
				//		request 요청에서 Content-Type을 확인해 보면, 'multipart/form-data; boundary=====WebkitFormBoundary[HashKey]'
				//		와 같은 값으로 전송된 것을 확인할 수 있다.
				
				if(isImageFile(file)){ // 이미지 파일일 때
					var formData = new FormData();
					formData.append("file", file);
					
					$.ajax({
						type : "post",
						url : "/ajax/uploadAjax",
						data : formData,
						dataType : "text",
						processData : false,
						contentType : false,
						success : function(data) {
							alert(data);
							if(data === "UPLOAD SUCCESS"){
								var file = event.target.files[0];
								var reader = new FileReader();
								reader.onload = function(e){
									$("#preview").attr("src", e.target.result);
								}
								reader.readAsDataURL(file);
							}
						}
					});
				}else { // 이미지 파일이 아닐 때
					alert("이미지를 넣어 주세요!");
				}
			});
			
		});
		
		// Change 이벤트가 발생할 때 선택된 파일 이미지인지 검증
		function isImageFile(file){
			var ext = file.name.split(".").pop().toLowerCase(); // 파일명에서 확장자를 가져온다.
			
			// 확장자 중 이미지에 해당하는 확장자가 아닌 경우 포함되어 있는 문자가 없으니 -1(false)가 리턴
			// 확장자 중 이미지 확장자가 포함되어 있다면 0보다 큰 수 일테니 true가 리턴
			return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
		}
	</script>
</html>

package kr.or.ddit.controller.member;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
@RequestMapping("/ajax")
public class AjaxMemberFileController {

	/*
	 * 		10. 파일 업로드 Ajax 방식 요청 처리
	 */
	
	// 파일 업로드 Ajax 방식 요청 처리 페이지
	@RequestMapping(value = "/registerFileForm", method = RequestMethod.GET)
	public String ajaxRegisterFileForm() {
		log.info("ajaxRegisterFileForm() 실행...!");
		return "member/ajaxRegisterFile";
	}
	
	@RequestMapping(value = "/uploadAjax", method = RequestMethod.POST, produces = "text/plain; charset=utf-8")
	public ResponseEntity<String> uploadAjax(MultipartFile file){ // formData.append("file", file);
		log.info("uploadAjax() 실행...!");
		log.info("originalFileName : " + file.getOriginalFilename());
		return new ResponseEntity<String>("UPLOAD SUCCESS", HttpStatus.OK);
	}
	
}

- http://localhost/ajax/registerFileForm

- clob, blob 형식의 데이터베이스로 저장할 수 있다.

---