9. Ajax 방식 요청 처리
1. URL 경로 상의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개 변수로 처리한다.
[요청과 처리]
요청 : /ajax/register/hongkd
처리 : ResponseEntity ajaxRegister01(@PathVariable("userId") String userId)
2. URL 경로 상의 여러개의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다.
[요청과 처리]
요청 : /ajax/register/hongkd/pw01
처리 : public ResponseEntity ajaxRegister02(@PathVariable("userId") String userId,
@PathVariable("password") String password)
3. 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.
[요청과 처리]
요청 : /ajax/register03
처리 : ResponseEntity ajaxRegister03(@RequestBody Member member)
4. 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.
[요청과 처리]
요청 : /ajax/register04
처리 : ResponseEntity ajaxRegister04(String userId)
[실패!! 기본 타입으로는 데이터 받을 수 없음]
5. 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다
[요청과 처리]
요청 : /ajax/register05?userId=user01
처리 : ResponseEntity ajaxRegister05(String userId, String password)
[넘겨 받은 userId는 값을 넘겨받고, password는 값을 받지 못한다.]
6. 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정한 문자열 매개변수와 @ReauestBody 어노테이션을 지정한 자바빈즈 매개변수로 처리한다.
[요청과 처리]
요청 : /ajax/register/honfkd
처리 : ResponseEntity ajaxRegister06(@PathVariable("userId") String userId,
@RequestBody Member member)
7. 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @ReauestBody 어노테이션을 지정하여 처리한다.
[요청과 처리]
요청 : /ajax/register07
처리 : ResponseEntity ajaxRegister07(@RequestBody List memberList)
8. 중첩된 객체 배열 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
[요청과 처리]
요청 : /ajax/register08
처리 : ResponseEntity ajaxRegister08(@RequestBody Member member)
9. 중첩된 객체 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
[요청과 처리]
요청 : /ajax/register09
처리 : ResponseEntity ajaxRegister09(@RequestBody Member member)
ajaxRegisterForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Register Form 1128</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 나중에 개발할때 이렇게 선언하면 서버에 우선 올려주고 호출해서 쓰는 것
// 데이터 메모리 때문에 이렇게 고고 이런 부분을 고민해야함 나중에는 메모리 가용!
var registerBtn01 = $("#registerBtn01");
var registerBtn02 = $("#registerBtn02");
var registerBtn03 = $("#registerBtn03");
var registerBtn04 = $("#registerBtn04");
var registerBtn05 = $("#registerBtn05");
var registerBtn06 = $("#registerBtn06");
var registerBtn07 = $("#registerBtn07");
var registerBtn08 = $("#registerBtn08");
var registerBtn09 = $("#registerBtn09");
//1) URL 경로 상의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다.
registerBtn01.on("click", function() {
$.get("/ajax/register/hongkd", function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
})
})
// 2) URL 경로 상의 여러개의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다
registerBtn02.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject ={
userId : userIdVal,
password : passwordVal
}
$.ajax({
type : "post",
url : "/ajax/register/hongkd/pw01",
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 3) 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다
registerBtn03.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject ={
userId : userIdVal,
password : passwordVal
}
$.ajax({
type : "post",
url : "/ajax/register03",
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.
registerBtn04.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject ={
userId : userIdVal,
password : passwordVal
}
$.ajax({
type : "post",
url : "/ajax/register04",
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다
registerBtn05.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject ={
userId : userIdVal,
password : passwordVal
}
$.ajax({
type : "post",
url : "/ajax/register05?userId=" + userIdVal,
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 6) 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정한 문자열 매개변수와
// @ReauestBody 어노테이션을 지정한 자바빈즈 매개변수로 처리한다.
registerBtn06.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject ={
userId : userIdVal,
password : passwordVal
}
$.ajax({
type : "post",
url : "/ajax/register06/" + userIdVal,
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @ReauestBody 어노테이션을 지정하여 처리한다.
registerBtn07.on("click", function() {
var userObject = [
{userId : "name01", password : "pw01"},
{userId : "name02", password : "pw02"}
]
$.ajax({
type : "post",
url : "/ajax/register07",
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 8) 중첩된 객체 배열 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
registerBtn08.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject = {
userId : userIdVal,
password : passwordVal,
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 : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
// 9) 중첩된 객체 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
registerBtn09.on("click", function() {
var userIdVal = $("#userId").val();
var passwordVal = $("#password").val();
var userObject = {
userId : userIdVal,
password : passwordVal,
cardList : [
{no : "12345", validMonth : "20221128"},
{no : "54321", validMonth : "20220101"}
]
}
$.ajax({
type : "post",
url : "/ajax/register09",
data : JSON.stringify(userObject),
contentType : "application/json; charset=utf-8",
success : function(result) {
console.log("result : " + result );
if(result === "SUCCESS"){
alert("SUCCESS")
}
}
})
})
});
</script>
<body>
<h3>9. Ajax 방식 요청 처리</h3>
<hr/>
<form >
<p>userId : <input type="text" name="userId" id="userId" value="hongkd"/> </p>
<p>password : <input type="text" name="password" id="password" value="1234"/> </p>
</form>
<p>1) URL 경로 상의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다.</p>
<button id="registerBtn01">registerBtn01</button>
<p>2) URL 경로 상의 여러개의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다.</p>
<button id="registerBtn02">registerBtn02</button>
<p>3) 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.</p>
<button id="registerBtn03">registerBtn03</button>
<p style="color: red;">4) 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.</p>
<button id="registerBtn04">registerBtn04</button>
<p>5) 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다.</p>
<button id="registerBtn05">registerBtn05</button>
<p>
6) 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정한 문자열 매개변수와 <br/>
@ReauestBody 어노테이션을 지정한 자바빈즈 매개변수로 처리한다.
</p>
<button id="registerBtn06">registerBtn06</button>
<p>7) 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @ReauestBody 어노테이션을 지정하여 처리한다. </p>
<button id="registerBtn07">registerBtn07</button>
<p>8) 중첩된 객체 배열 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다. </p>
<button id="registerBtn08">registerBtn08</button>
<p>9) 중첩된 객체 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다. </p>
<button id="registerBtn09">registerBtn09</button>
<hr/>
<p>
@RequestBody 를 사용하면 넘기는 파라미터가 받는 파라미터의 객체 속성으로 포함되어 있다면 객체를 자동으로 생성해준다 <br/>
Member, List제네릭, Map제네릭 등등
</p>
</body>
</html>AjaxMemberController
package org.hdcd.controller;
import java.util.List;
import org.hdcd.vo.Address;
import org.hdcd.vo.Card;
import org.hdcd.vo.Member;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.w3c.dom.ls.LSInput;
@Controller
@RequestMapping("/ajax")
public class AjaxMemberController {
private static Logger logger = LoggerFactory.getLogger(AjaxMemberController.class);
// 9. Ajax 방식 요청 처리 시작 페이지
// URL : /ajax/registerForm
@RequestMapping(value = "/registerForm")
public String ajaxRegisterForm() {
return "member/ajaxRegisterForm";
}
// 1)
// URL 경로상의 경로 변수 값을 @PathVariable 어노테이션을 지정하며 문자열 매개변수 처리한다.
@RequestMapping(value = "/register/{userId}", method = RequestMethod.GET)
public ResponseEntity<String> ajaxRegister01(@PathVariable("userId") String userId){
logger.info("ajaxRegister01");
logger.info("userId : " + userId);
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 2)
// URL 경로 상의 여러개의 경로 변수 값을 @PathVariable 어노테이션을 지정하여 문자열 매개변수로 처리한다.
@RequestMapping(value = "/register/{userId}/{password}", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister02(
@PathVariable("userId") String userId,
@PathVariable("password") String password){
logger.info("ajaxRegister02");
logger.info("userId : " + userId);
logger.info("password : " + password);
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 3)
// 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정하여 자바빈즈 매개변수로 처리한다.
@RequestMapping(value = "/register03", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister03(@RequestBody Member member){
logger.info("ajaxRegister03");
logger.info("userId : " + member.getUserId());
logger.info("password : " + member.getPassword());
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 4)
// 객체 타입의 JSON 요청 데이터는 문자열 매개변수로 처리할 수 없다.
@RequestMapping(value = "/register04", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister04(String userId){
// 요청 본문에서 데이터가 바인딩 되지 않아 userId가 null이 나온다.
// 요청 본문에서 데이터를 가져오려면 @RequestBody 어노테이션이 필요하다.
logger.info("ajaxRegister04");
logger.info("userId : " + userId);
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 5)
// 요청 URL에 쿼리파라미터를 붙여서 전달하면 문자열 매개변수로 처리한다
@RequestMapping(value = "/register05", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister05(String userId, String password){
// userId 는 쿼리스트링에 담겨져 오는 데이터이기 때문에, 일반적인 방식으로도 데이터를 받을 수 있지만,
// password는 요청 본문에서 데이터를 바인딩해 받아오지 못하므로 null이 출력된다.
logger.info("ajaxRegister05");
logger.info("userId : " + userId);
logger.info("password : " + password);
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 6)
// 객체 타입의 JSON 요청 데이터를 @PathVariable 어노테이션을 지정한 문자열 매개변수와
// @ReauestBody 어노테이션을 지정한 자바빈즈 매개변수로 처리한다.
@RequestMapping(value = "/register06/{userId}", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister06(@PathVariable("userId") String userId,
@RequestBody Member member){
logger.info("ajaxRegister06");
logger.info("userId : " + userId);
logger.info("member.getUserId() : " + member.getUserId());
logger.info("member.getPassword() : " + member.getPassword());
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 7)
// 객체 배열 타입의 JSON 요청 데이터를 자바빈즈 요소를 가진 리스트 컬렉션 매개변수에 @ReauestBody 어노테이션을 지정하여 처리한다.
@RequestMapping(value = "/register07", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister07(@RequestBody List<Member> memberList){ // 그냥 List는 안되고 @RequestBody 해줘서 가능
logger.info("ajaxRegister07");
for(Member member : memberList) {
logger.info("userId() : " + member.getUserId());
logger.info("password() : " + member.getPassword());
}
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 8)
// 중첩된 객체 배열 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
@RequestMapping(value = "/register08", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister08(@RequestBody Member member){ // 그냥 List는 안되고 @RequestBody 해줘서 가능
logger.info("ajaxRegister08");
logger.info("userId : " + member.getUserId());
logger.info("password : " + member.getPassword());
Address address = member.getAddress();
if(address != null) {
logger.info("address .password : " + address.getPostCode());
logger.info("address .password : " + address.getLocation());
}else {
logger.info("address == null");
}
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
// 9)
// 중첩된 객체 타입의 JSON 요청 데이터를 @ReauestBody 어노테이션을 지정하여 중첩된 자바빈즈 매개변수로 처리한다
@RequestMapping(value = "/register09", method = RequestMethod.POST)
public ResponseEntity<String> ajaxRegister09(@RequestBody Member member){ // 그냥 List는 안되고 @RequestBody 해줘서 가능
logger.info("ajaxRegister09");
logger.info("userId : " + member.getUserId());
logger.info("password : " + member.getPassword());
List<Card> cardList = member.getCardList();
if(cardList != null) {
logger.info("cardList.size() : " + cardList.size());
for(int i = 0; i< cardList.size(); i++) {
Card card = cardList.get(i);
logger.info("card.getNo() : " + card.getNo());
logger.info("card.getValidMonth() : " + card.getValidMonth());
}
}else {
logger.info("cardList == null");
}
ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
return entity;
}
}
10. 파일업로드 Ajax 방식 요청 처리
1. Ajax 방식으로 전달한 파일 요소값을 스프링 MVC가 지원하는 MultipartFile 매개변수로 처리한다.
[요청과 처리]
요청 : /ajax/uploadAjax
처리 : esponseEntity uploadAjax(MultipartFile file)
input type='file' change 이벤트를 이용한 비동기 파일 업로드로 업로드한 이미지가 서버로 넘어가고 결과값으로
'UPLOAD SUCCESS'를 얻어오면 img 태그에 preview 항목으로 내가 업로드한 이미지를 썸네일로 미리 볼 수 있는 기능을 구현
ajaxRegisterFile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Register File 20221128</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var inputFile = $("#inputFile");
// Ajax 방식으로 전달한 파일 요소값을 스프링 MVC가 지원하는 MultipartFile 매개변수로 처리한다.
inputFile.on("change", function(event) {
console.log("change...!");
00
var files = event.target.files;
var file = files[0];
console.log(file);
// idImageFileFlag(file) 메서드는 custom method로
// 업로드된 파일이 이미지가 맞는지 여부를 확인할 수 있도록 체크해주는 메서드
// parameter : 파일
// return : boolean true/false
if(idImageFileFlag(file)){
// ajax로 파일을 컨트롤 할 시, formData 를 이용한다.
//append()이용
var formData = new FormData();
formData.append("file", file);
// formData는 key/value 형식으로 데이터가 저장된다. ("file", file)
// 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=-----WebkitFormBoundary7Rap4TfboPbSzm2q'
// 와 같은 값으로 전송된 것을 확인할 수 있습니다.
$.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("이미지 넣어줘...!")
}
})
});
function idImageFileFlag(file) {
var ext = file.name.split(".").pop().toLowerCase(); // 파일명에서 확장자를 가져옵니다.
return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}
</script>
<body>
<h1>10. 파일업로드 Ajax 방식 요청 처리</h1>
<hr/>
<p>Ajax 방식으로 전달한 파일 요소값을 스프링 MVC가 지원하는 MultipartFile 매개변수로 처리한다.</p>
<div>
<input type="file" id="inputFile"><br/>
<hr/>
<img id="preview">
</div>
</body>
</html>AjaxMemberFileController
package org.hdcd.controller;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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;
@Controller
@RequestMapping("/ajax")
public class AjaxMemberFileController {
private static Logger logger = LoggerFactory.getLogger(AjaxMemberFileController.class);
//10. 파일 업로드 Ajax 방식 요청 처리
//파일 업로드 아작스 방식 요청 처리 시작 페이지
@RequestMapping(value = "/registerFileForm", method = RequestMethod.GET)
public String ajaxRegisterFileForm() {
return "member/ajaxRegisterFile";
}
@RequestMapping(value = "uploadAjax", method = RequestMethod.POST, produces ="text/plain; charset=utf-8")
public ResponseEntity<String> uploadAjax(MultipartFile file){
String originalFilename = file.getOriginalFilename();
logger.info("originalFilename" + originalFilename);
ResponseEntity<String> entity = new ResponseEntity<String>("UPLOAD SUCCESS", HttpStatus.OK);
return entity;
}
}
안녕하세요! 초보개발자 공부 시작!