스프링 프레임워크 (32)

스프링 프레임워크 · 2024.05.09

[스프링 프레임워크] 20장 모델을 통한 데이터 전달

[스프링 프레임워크] 20장 모델을 통한 데이터 전달

스프링 프레임워크
스프링 프레임워크 · 2024.05.08

[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리

[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리

스프링 프레임워크
스프링 프레임워크 · 2024.05.08

[스프링 프레임워크] 18장 Ajax 방식 요청 처리

[스프링 프레임워크] 18장 Ajax 방식 요청 처리

스프링 프레임워크

스프링 프레임워크

[스프링 프레임워크] 20장 모델을 통한 데이터 전달

2024. 5. 9. 16:42

모델을 통한 데이터 전달

예시1

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	// DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	MemberService memberService;
	
	//요청URI : /read01
	//Model 객체를 통해서 다양한 데이터를 뷰(View)에 전달
	@GetMapping("/read01")
	public String read01(Model model) {
		model.addAttribute("userId", "hongkd");
		model.addAttribute("password", "1234");
		model.addAttribute("email", "aaa@ccc.com");
		model.addAttribute("userName", "홍길동");
		model.addAttribute("birthDay", "1989-09-07");
		
		// /views/read01.jsp
		return "read01";
	}
}

read01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<h3>Result</h3>
<p>userId : ${userId}</p> 
<p>password : ${password}</p> 
<p>email : ${email}</p> 
<p>userName : ${userName}</p> 
<p>birthDay : ${birthDay}</p>

예시2

Member.java

package kr.or.ddit.vo;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

//POJO가 약해짐
@Data
public class Member {
	private String userId;
	private String userName = "hongkd";
	private String password = "1234";
	@DateTimeFormat(pattern="yyyy-MM-dd") private Date regDate;
	private int coin;
	private String gender;
	private String email;
	private String birthDay;
	private String nationality;
	private String cars;
	private String[] carArray;
	private ArrayList<String> carList;
	private String hobby;
	private String[] hobbyArray;
	private ArrayList<String> hobbyList;
	private String developer;
	private boolean foreigner;
	private String introduction;
	private Date dateOfBirth;
	
	// 중첩된(nested) 자바빈즈
	// MEMBER : ADDRESS = 1 : 1
	private Address address;
	
	// MEMBER : CARD = 1 : N
	private List<Card> cardList;
	
	//스프링프레임워크에서 제공하는 MultipartFile 파일객체타입
	private MultipartFile picture;
	
	//<input type="file" name="pictures" multiple>
	// 위의 input과 name 값이 변수명과 같아야 함
	private MultipartFile[] pictures;
}

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	// DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	MemberService memberService;
	
	//요청URI : /read02
	//Model 객체에 자바빈즈 클래스 객체를 값으로만 전달할 때는 뷰에서 참조할 이름을 클래스명의 앞글자를 소문자로 변환하여 처리함
	@GetMapping("/read02")
	public String read02(Model model) {
		Member member = new Member();
		
		member.setUserId("hongkd");
		member.setPassword("1234");
		member.setEmail("aaa@ccc.com");
		member.setUserName("홍길동");
		member.setBirthDay("1989-09-07");
		
		Calendar cal = Calendar.getInstance();
		cal.set(1988, 10, 7);
		member.setDateOfBirth(cal.getTime());
		
		log.info("member : " + member);
		
		model.addAttribute("member",member);
		
		// forwarding : /views/read02.jsp
		return "read02";
	}
}

read02.jsp

=> model.addAttribute("member",member); 로 저장한 member의 값을 jsp에서 꺼내올 수 있음

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<p>${member}</p>
<p>userId : ${member.userId}</p>
<p>userName : ${member.userName}</p>

String[]와 List<String> 비교 => 다를 것 없음

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	// DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	MemberService memberService;
	
	@GetMapping("/read04")
	public String read04(Model model) {
		String[] carArray = {"saab", "audi"};
		
		List<String> carList = new ArrayList<String>();
		carList.add("saab");
		carList.add("audi");
		
		
		String[] hobbyArray = {"Music", "Movie"};
		
		List<String> hobbyList = new ArrayList<String>();
		hobbyList.add("Music");
		hobbyList.add("Movie");
		
		model.addAttribute("carArray", carArray);
		model.addAttribute("carList", carList);
		
		model.addAttribute("hobbyArray", hobbyArray);
		model.addAttribute("hobbyList", hobbyList);
		
		// /views/read04.jsp 포워딩
		return "read04";
	}
}

read04.jsp

stat.index : 0부터 시작
stat.count : 1부터 시작

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<h4>hobbyArray</h4>
<!-- hobbyArray : {"Music", "Movie"} -->
<!-- items에는 컨트롤러에 있는 이름 그대로 집어 넣음 -->
<c:forEach var="hobby" items="${hobbyArray}" varStatus="stat">
	<p>${stat.index} : ${hobby}</p>
</c:forEach>
<hr />

<h4>hobbyList</h4>
<!-- hobbyList : List<String> -->
<!-- hobbyList.add("Music");	hobbyList.add("Movie"); -->
<c:forEach var="hobby" items="${hobbyList}" varStatus="stat">
	<p>${stat.count} : ${hobby}</p>
</c:forEach>

중첩된 자바빈즈

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	// DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	MemberService memberService;
	
	@GetMapping("/read05")
	public String read05(Model model){
	
		Member member = new Member();
		
			// member 안에 있는 값임
			Address address = new Address();
			address.setPostCode("080908");
			address.setLocation("seoul");
		
		member.setAddress(address);
		
			List<Card> cardList = new ArrayList<Card>();
		
			Card card1 = new Card();
			card1.setNo("123456");
			card1.setValidMonth("05/24");
			
			cardList.add(card1);
			
			Card card2 = new Card();
			card2.setNo("11111");
			card2.setValidMonth("06/24");
			
			cardList.add(card2);
			
		member.setCardList(cardList);
		Calendar cal = Calendar.getInstance();
		cal.set(2000, 05, 07);
		member.setDateOfBirth(cal.getTime());

		model.addAttribute("member", member);
		
		return "read05";
	}
}

read05.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<p>${member}</p>

<!--  --MEMBER : ADDRESS = 1 : 1 (association)
   -- member.address.userId(자바빈객체.중첩된 자바빈객체.프로퍼티)
   address = Address(userId = null , posetCode = 080908 
         , location = seoul),
      -->
<!--  model.addAttribute("member", --> 
<p>member.address.postCode
	: ${member.address.postCode}
</p>
<p>member.address.location
	: ${member.address.location}
</p>
<hr />

<!-- List<Card> cardList -->
<h4>member.cardList</h4>
<c:forEach var="card" items="${member.cardList}" varStatus="stat">
	<p>${card.no} : ${card.validMonth}</p>
</c:forEach>

쿼리 조인 예시1

LprodController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.LprodService;
import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;
import lombok.extern.slf4j.Slf4j;

/*
Controller 어노테이션
스프링 프레임워크에게 "이 클래스는 웹 브라우저의 요청(request)를
받아들이는 컨트롤러야" 라고 알려주는 것임.
스프링은 servlet-context.xml의 context:component-scan의 설정에 의해
이 클래스를 자바빈 객체로 등록(메모리에 바인딩).
*/
//스프링 프레임워크에게 "이 클래스는 컨트롤러야"라고 알려주자
@Slf4j
@RequestMapping("/lprod")
@Controller
public class LprodController {
	
	//DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	LprodService lprodService;
	
	/*
	요청URI : /lprod/detail?lprodGu=P101
	요청파라미터 : lprodGu=P101
	요청방식 : get
	
	리턴타입 : ModelAndView
	View : lprod > detail.jsp
	
	detail(ModelAndView mav) => 스프링이 mav객체를 자동 생성
	*/
	@RequestMapping(value="/detail", method=RequestMethod.GET)
	public ModelAndView detail(LprodVO lprodVO, ModelAndView mav){
		log.info("detail 도착");

		//Model
	    // lprod_SQL.xml 의 namespace인 lprod내의 id값인 detail에 접근하여
	    // SELECT LPROD_ID, LPROD_GU, LPROD_NM
	    // FROM     LPROD
	    // WHERE  LPROD_GU = 'P101'
	    // 을 처리한 후 다음이 콘솔에 출력되도록 해보자
		
		log.info("detail->lprodVO : " + lprodVO);
		lprodVO = this.lprodService.detail(lprodVO);
		log.info("lprodVO : " + lprodVO);
		
		mav.addObject("lprodVO",lprodVO);
		
		// forwarding : jsp
		mav.setViewName("lprod/detail");
		
		return mav;
	}
}

LprodVO.java

package kr.or.ddit.vo;

import java.util.List;

import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

//POJO(Plain Old Java Object)에 위배
@Data
public class LprodVO {
	private int lprodId;
	private String lprodGu;
	private String lprodNm;
	
	//상품분류코드	: 상품		= 1 : N
	//LPROD		:PRODUCT	= 1 : N
	private List<ProductVO> productVOList;
	
	
	private MultipartFile[] pictures;
}

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
</head>
<body>
	<h1>상품분류 상세</h1>
	<!-- 
	요청URI : /lprod/updatePost
	요청파라미터 : {lprodId=14,lprodGu=P501, lprodNm=분식류}
	요청방식 : post
 	-->
 	<h3>상품 분류 정보</h3>
 	<div id="divForm">
		<form id="frm" action="/lprod/updatePost" method="post">
			<p>
				<input type="number" name="lprodId" value="${lprodVO.lprodId}"
					readonly class="formdata" placeholder="상품분류 아이디(ex. 14)" />
			</p>
			<p>
				<input type="text" name="lprodGu" value="${lprodVO.lprodGu}" readonly
					class="formdata" placeholder="상품분류 코드(ex. P501)" required />
			</p>
			<p>
				<input type="text" name="lprodNm" value="${lprodVO.lprodNm}" readonly
					class="formdata" placeholder="상품분류 명(ex. 분식류)" />
			</p>
	
			<!-- ///// 일반모드 시작 ///// -->
			<p id="p1">
				<input type="button" id="edit" value="수정" /> <input type="button"
					id="delete" value="삭제" /> <input type="button" id="list" value="목록" />
			</p>
			<!-- ///// 일반모드 끝 ///// -->
			<!-- ///// 수정모드 시작 ///// -->
			<p id="p2" style="display: none">
				<input type="button" id="confirm" value="확인" /> <input type="button"
					id="cancel" value="취소" />
			</p>
			<!-- ///// 수정모드 끝 ///// -->
		</form>
	</div>
	
	<h3>상품 정보</h3>
	<!-- mav.addObject("lprodVO",lprodVO); -->
<%-- 	<p>${lprodVO.productVOList}</p> --%>
	<table border="1">
		<thead>
			<th>상품 아이디</th><th>상품 명</th><th>상품 가격</th>
		</thead>
		<tbody>
			<!-- lprodVO.productVOList : List<ProductVO> -->
			<c:forEach var="productVO" items="${lprodVO.productVOList}" varStatus="">
				<tr>
					<th>${productVO.productId}</th>
					<th>${productVO.pname}</th>
					<th>${productVO.unitPrice}</th>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</body>
</html>

lprod_SQL.xml

join을 했을 때 resultMap사용
resultMap의 이름으로 resultMap 생성 후 id 같은 이름으로 기입

lprodVO에서 1:N으로 사용했기에 collection 을 사용 (collection의 property의 이름은 vo에 있는 이름과 같아야 함)
resultMap을 사용하여 이름을 정의
resultMap 생성 후 id를 정의한 것으로 기입하여 사용

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="lprod">
	<!-- LPROD : 1 -->
	<!-- DB영역과 Java의 영역을 서로 매핑하는 역할을 함 -->
	<resultMap type="lprodVO" id="lprodMap">
		<result property="lprodId" column="LPROD_ID"/>
		<result property="lprodGu" column="LPROD_GU"/>
		<result property="lprodNm" column="LPROD_NM"/>
		<!-- 1:N이기에 collection 사용 -->
		<collection property="productVOList" resultMap="productMap"></collection>
	</resultMap>
	
	<!-- PRODUCT : N -->
	<resultMap type="productVO" id="productMap">
		<result property="productId" column="PRODUCT_ID"/>
		<result property="pname" column="PNAME"/>
		<result property="unitPrice" column="UNIT_PRICE"/>
		<result property="description" column="DESCRIPTION"/>
		<result property="manufacturer" column="MANUFACTURER"/>
		<result property="category" column="CATEGORY"/>
		<result property="unitsInStock" column="UNITS_IN_STOCK"/>
		<result property="condition" column="CONDITION"/>
		<result property="filename" column="FILENAME"/>
		<result property="quantity" column="QUANTITY"/>
	</resultMap>
	
	<!-- PRODUCT : N -->
	<!-- join을 했기에 resultMap을 사용 -->
	<select id="detail" parameterType="lprodVO" resultMap="lprodMap">
		SELECT A.LPROD_ID, A.LPROD_GU, A.LPROD_NM,
		    B.PRODUCT_ID, B.PNAME, B.UNIT_PRICE, B.DESCRIPTION, B.MANUFACTURER,
		    B.CATEGORY, B.UNITS_IN_STOCK, B.CONDITION, B.FILENAME, B.QUANTITY
		FROM     LPROD A LEFT OUTER JOIN PRODUCT B ON(A.LPROD_GU = SUBSTR(B.PRODUCT_ID,1,4))
		WHERE  A.LPROD_GU = #{lprodGu}
	</select>
</mapper>

쿼리 조인 예시2

EmployeeVO.java

package kr.or.ddit.vo;

import java.util.List;

import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

@Data
public class EmployeeVO {
	private String empNo;
	private String empName;
	private String empAddress;
	private String empTelno;
	private int empSalary;
	private String filename;
	
	private List<LicenseVO> licenseVOList;
	
	//EMPLOYEE : 증명사진 = 1 : 1
	private MultipartFile uploadFile;
}

EmployeeController.java

package kr.or.ddit.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.sun.org.apache.xpath.internal.operations.Mod;

import kr.or.ddit.service.EmployeeService;
import kr.or.ddit.vo.EmployeeVO;
import lombok.extern.slf4j.Slf4j;

// 스프링 프레임워크에게 컨트롤러임을 알려줌
// 스프링이 빈(bean,객체)으로 등록하여 관리
@Controller
@RequestMapping("/employee")
@Slf4j
public class EmployeeController {
	
	// 의존성 주입(Dependency Injection)
	@Autowired
	EmployeeVO myEmpVO;
	
	@Autowired
	EmployeeService employeeService;
	
	@RequestMapping(value="/detail", method=RequestMethod.GET)
	public ModelAndView detail(EmployeeVO employeeVO, ModelAndView mav) {
		log.info("list->detail : " + employeeVO);
		
		employeeVO = this.employeeService.detail(employeeVO);
		mav.addObject("employeeVO", employeeVO);
		
		mav.setViewName("employee/detail");
		
		return mav;
	}
}

employee_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="employee">
	<!-- EMPLOYEE : 1 -->
	<resultMap type="employeeVO" id="employeeMap">
		<result property="empNo" column="EMP_NO"/>
		<result property="empName" column="EMP_NAME"/>
		<result property="empAddress" column="EMP_ADDRESS"/>
		<result property="empTelno" column="EMP_TELNO"/>
		<result property="empSalary" column="EMP_SALARY"/>
		<result property="filename" column="FILENAME"/>
		<collection property="licenseVOList" resultMap="licenseMap"></collection>
	</resultMap>
	
	<!-- LICENSE : N -->
	<resultMap type="licenseVO" id="licenseMap">
		<result property="empNo" column="EMP_NO"/>
		<result property="licNo" column="LIC_NO"/>
		<result property="licNm" column="LIC_NM"/>
		<result property="licDt" column="LIC_DT"/>
	</resultMap>
	
	<!-- 조인 조건인 P.K = F.K이므로 F.K는 쿼리에서 제외 => 공동된 이름은 삭제-->
	<select id="detail" parameterType="employeeVO" resultMap="employeeMap">
		SELECT A.EMP_NO, A.EMP_NAME, A.EMP_ADDRESS, A.EMP_TELNO, A.EMP_SALARY, A.FILENAME,
		   B.LIC_NO, B.LIC_NM, B.LIC_DT
		FROM EMPLOYEE A LEFT OUTER JOIN LICENSE B ON(A.EMP_NO = B.EMP_NO)
		WHERE A.EMP_NO = #{empNo}
	</select>
</mapper>

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 22장 공통 코드로 관리 (0)	2024.05.10
[스프링 프레임워크] 21장 스프링 폼 태그 라이브러리 (0)	2024.05.10
[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리 (0)	2024.05.08
[스프링 프레임워크] 18장 Ajax 방식 요청 처리 (0)	2024.05.08
[스프링 프레임워크] 17장 파일 업로드 (0)	2024.05.03

스프링 프레임워크

[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리

2024. 5. 8. 17:55

파일업로드 Ajax 방식 요청 처리

이미지 변경 시 데이터 확인

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	//파일업로드 Ajax 방식 요청 처리
	$("#inputFile").on("change", function(event){
		console.log("change!!");
		
		//event.target : <input type="file"...
		let files = event.target.files;
		let file = files[0];
		console.log("file : ", file);
		
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><input type="file" name="inputFile" id="inputFile"></p>
	
</form>

ajax 이용하여 파일 정보 보내기

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	//파일업로드 Ajax 방식 요청 처리
	$("#inputFile").on("change", function(event){
		console.log("change!!");
		
		//event.target : <input type="file"...
		let files = event.target.files;
		let file = files[0];
		console.log("file : ", file);
		
		//formData : <form></form>
		let formData = new FormData();
		/* append : 부모의 마지막 자식요소를 추가
		<form>
			<input type="file" name="file" />
		</form>
		*/
		formData.append("file",file);
		
		//아작나써유..피씨다타써
		$.ajax({
			url:"/uploadAjax",
			processData:false,
			contentType:false,
			data:formData,
			type:"post", //파일 업로드시에는 반드시 post 방식이어야함
			dataType:"text",
			success:function(data) {
				console.log("data : " + data);
				alert(data);
			}
		});
	});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><input type="file" name="inputFile" id="inputFile"></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	/*
	<form>
		<input type="file" name="file" /> 
	</form>
	 */
	@ResponseBody
	@PostMapping("/uploadAjax")
	public String uploadAjax(MultipartFile file) { // name="file"와 이름이 같아야함
		String fileName = file.getOriginalFilename();
		
		log.info("fileName : " + fileName);
		
		return fileName;
	}
}

append로 다른 값도 같이 보내기

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	//파일업로드 Ajax 방식 요청 처리
	$("#inputFile").on("change", function(event){
		console.log("change!!");
		
		//event.target : <input type="file"...
		let files = event.target.files;
		let file = files[0];
		console.log("file : ", file);
		
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		
		//event.target : <input type="file"...
		let files = event.target.files;
		let file = files[0];
		console.log("file : ", file);
		
		//formData : <form></form>
		let formData = new FormData();
		/* append : 부모의 마지막 자식요소를 추가
		<form>
			<input type="text" name="userId" value="honggd" />
			<input type="text" name="password" value="1234" />
			<input type="file" name="file" />
		</form>
		*/
		formData.append("userId",userId);
		formData.append("password",password);
		formData.append("file",file);
		
		//아작나써유..피씨다타써
		$.ajax({
			url:"/uploadAjax",
			processData:false,
			contentType:false,
			data:formData,
			type:"post", //파일 업로드시에는 반드시 post 방식이어야함
			dataType:"json",
			success:function(data) {
				console.log("data : ", data);
				alert(data);
			}
		});
	});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><input type="file" name="inputFile" id="inputFile"></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import kr.or.ddit.service.MemberService;
import kr.or.ddit.vo.Address;
import kr.or.ddit.vo.Card;
import kr.or.ddit.vo.Member;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class MemberController {
	
	/*
	<form>
		<input type="text" name="userId" value="honggd" />
		<input type="text" name="password" value="1234" />
		<input type="file" name="file" />
	</form>
	 */
	@ResponseBody
	@PostMapping("/uploadAjax")
	public Map<String,Object> uploadAjax(String userId, String password,
			MultipartFile file) { // name="file"와 이름이 같아야함
		String fileName = file.getOriginalFilename();
		
		log.info("userId : " + userId);
		log.info("password : " + password);
		log.info("fileName : " + fileName);
		
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("userId", userId);
		map.put("password", password);
		map.put("fileName", fileName);
		
		//ResponseBody -> map 객체 -> json string으로 serialize됨
		return map;
	}
}

비동기로 파일업로드 처리

자바빈즈 매개변수 x

create.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
//e : onchange 이벤트
function handleImg(e){
// 	<p id="pImg"></p> 영역에 이미지 미리보기를 해보자
	
	let files = e.target.files;
	
	//이미지가 여러개가 있을 수 있으므로 이미지들을 각각 분리해서 배열로 만듦
	let fileArr = Array.prototype.slice.call(files);
	
	fileArr.forEach(function(f){
		//이미지 파일이 아닌 경우 이미지 미리보기 실패 처리(MIME타입)
		if(!f.type.match("image.*")){
			alert("이미지 확장자만 가능합니다.");
			return;
		}
		
		//이미지 객체를 읽을 자바스크립트의 reader 객체 생성
		let reader = new FileReader();
		
		$("#pImg").html("");
		
		//e : reader가 이미지 객체를 읽는 이벤트
		reader.onload = function(e) {
			//e.target : f(이미지 객체)
			//e.target.result : reader가 이미지를 다 읽은 결과
			let img_html = "<img src=" + e.target.result + " style='width:30%;' />";
			//객체.append : 누적, .html : 새로고침, .innerHTML : J/S
			$("#pImg").append(img_html);
		}
		
		//f : 이미지 파일 객체를 읽은 후 다음 이미지 파일(f)을 위해 초기화 함
		reader.readAsDataURL(f);
	});
}

$(function(){
	//이미지 미리 보기 시작////////
	$("#uploadFile").on("change",handleImg);
	//이미지 미리 보기 끝////////
	
	$("#btnSave").on("click", function(){
		let data = $("#frm").serialize();
		let dataArray = $("#frm").serializeArray();
		
		console.log("data : ", data);
		console.log("dataArray : ", dataArray);
		
		let param = {};
		
		dataArray.map(function(data, index){
			param[data.name] = data.value;
		});
		
		console.log("param : ", param)
		//------------------------------------
		let title = $("input[name='title']").val();
		let category = $("input[name='category']").val();
		let price = $("input[name='price']").val();
		
		//<form></form>
		let formData = new FormData();
		
		formData.append("title",title);
		formData.append("category",category);
		formData.append("price",price);
		/*
		<form>
			<input type="text" name="title" value="개똥이데이" />
			<input type="text" name="category" value="영화" />
			<input type="text" name="price" value="12000" />
			<input type="file" name="prices" />
			<input type="file" name="prices" />
			<input type="file" name="prices" />
		</form>
		*/
		let inputFile = $("#uploadFile");
		let files = inputFile[0].files;
		console.log("files.length : " + files.length);
		
		for(let i=0; i<files.length; i++) {
			formData.append("pictures",files[i]); //vo에 있는 이름과 맞춰야함
		}
		
		$.ajax({
			url:"/createFormData",
			processData:false,
			contentType:false,
			data:formData,
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : ", result);
			}
		});
	});
});
</script>
</head>
<body>
<h1>책 등록</h1>

<h5>${title}</h5>

<!-- 
요청URI : /crate
요청파라미터 : {title=개똥이의 모험, category=소설, price=12000}
요청방식 : post
-->
<form id="frm" action="/create" method="post" enctype="multipart/form-data">
	<p>제목 : <input type="text" name="title" required placeholder="제목"></p>
	<p>카테고리 : <input type="text" name="category" required placeholder="카테고리"></p>
	<p>가격 : <input type="number" name="price" required placeholder="가격"></p>
	<p id="pImg"></p>
	<p>도서이미지 : 
		<input type="file" id="uploadFile" name="pictures" multiple></p>
	<p>
		<input type="button" id="btnSave" value="저장">
	</p>
</form>

</body>
</html>

BookController.java

package kr.or.ddit.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


import kr.or.ddit.service.BookService;
import kr.or.ddit.vo.BookVO;
import lombok.extern.slf4j.Slf4j;

/*
Controller 어노테이션
스프링 프레임워크에게 "이 클래스는 웹 브라우저의 요청(request)를
받아들이는 컨트롤러야" 라고 알려주는 것임.
스프링은 servlet-context.xml의 context:component-scan의 설정에 의해
이 클래스를 자바빈 객체로 등록(메모리에 바인딩).
*/
// Slf4j 사용 시 하단의 로깅 사용 가능
@Slf4j
@Controller
public class BookController {
	
	//서비스를 호출하기 위해 의존성 주입(Dependency Injection-DI)
	//IoC(Inversion of Control) - 제어의 역전.(개발자가 객체생성하지 않고 스프링이 객체를 미리 생성해놓은 것을 개발자가 요청)
	// DI - 의존성 주입(Dependency Injection) : 이미 만들어져 있는 BookServiceImpl.java를 @Service로 가져다씀
	@Autowired
	BookService bookService;
    
	//bookVO 객체가 JSON string으로 serialize되어 리턴됨
	@ResponseBody
	@PostMapping("/createFormData")
	public int createFormData(BookVO bookVO) {
		/*
		BookVO(bookId=0, title=개똥이의 모험, category=소설
		, price=12000, insertDate=null)
		 */
		log.info("bookVO : " + bookVO);
		
		// 도서 등록
		int result = this.bookService.createPost(bookVO); // 이곳을 거치면서 bookId값이 채워짐
		log.info("createPost->result : " + result);
		
		/*
		BookVO(bookId=0, title=개똥이의 모험, category=소설
		, price=12000, insertDate=null)
		 */
		//bookVO에 MultipartFile 타입이 있어서 serialize되지 못함
		return bookVO.getBookId();
	}
}

자바빈즈 매개변수 o

create.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){	
	$("#btnPlus").on("click",function(){
		let pAreaLen = $(".pArea").length;
		
		let str = "";
			str += "<p class='pArea'>";
			str += "<input type='text' name='licenseVOList["+pAreaLen+"].licNo' id='licNo"+pAreaLen+"' class='form-control col-sm-3 float-left' placeholder='자격증 번호'>";
			str += "<input type='text' name='licenseVOList["+pAreaLen+"].licNm' id='licNm"+pAreaLen+"' class='form-control col-sm-3 float-left' placeholder='자격증 명'>";
			str += "<input type='date' name='licenseVOList["+pAreaLen+"].licDt' id='licDt"+pAreaLen+"' class='form-control col-sm-3 float-left' placeholder='발급 일'>";
			str += "</p>";
			str += "<p style='clear:both;'></p>";
		
		$("#btnSubmit").parent().before(str);
		
	});
	
	$("#btnMinus").on("click",function(){
		let pAreaLen = $(".pArea").length;
		console.log("pAreaLen : ", pAreaLen);
		
		if(pAreaLen < 2) {
			alert("최소 하나는 존재해야 합니다.");
			return;
		}
		
		// next는 선택한 요소의 다음 형제 요소를 반환
		$(".pArea").last().next().remove();
		$(".pArea").last().remove();
	});
	
	$("#btnSubmit").on("click",function(){
		let empNo = $("input[name='empNo']").val();
		let empName = $("input[name='empName']").val();
		let empAddress = $("input[name='empAddress']").val();
		let empTelno = $("input[name='empTelno']").val();
		let empSalary = $("input[name='empSalary']").val();
		let filename = $("input[name='filename']").val();
		
		
		let formData = new FormData();
		
		formData.append("empNo",empNo);
		formData.append("empName",empName);
		formData.append("empAddress",empAddress);
		formData.append("empTelno",empTelno);
		formData.append("empSalary",empSalary);
		formData.append("filename",filename);
		
		let inputFile = $("#uploadFile");
		let files = inputFile[0].files;
		
		formData.append("uploadFile", files[0]);
		
		$(".pArea").each(function(idx,data){
			let licNo = $(this).children().eq(0).val();
			let licNm = $(this).children().eq(1).val();
			let licDt = $(this).children().eq(2).val();

			
			formData.append("licenseVOList[" + idx + "].licNo", licNo);
			formData.append("licenseVOList[" + idx + "].licNm", licNm);
			formData.append("licenseVOList[" + idx + "].licDt", licDt);
		});
		
		$.ajax({
			url:"/employee/createFormData",
			processData:false,
			contentType:false,
			data:formData,
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : ", result);
			}
		});
	});
});
</script>
</head>
<body>
<h1>직원 등록</h1>

<h5>${title}</h5>

<form action="/employee/create" method="post" enctype="multipart/form-data">
	<p><input type="text" name="empNo" placeholder="직원 번호" required /></p>
	<p><input type="text" name="empName" placeholder="직원 명" required /></p>
	<p><input type="text" name="empAddress" placeholder="직원 주소" required /></p>
	<p><input type="text" name="empTelno" placeholder="직원 연락처" required /></p>
	<p><input type="number" name="empSalary" placeholder="직원 급여" required /></p>
	<!-- multiple 안씀 => EMPLOYEE : 증명사진 = 1 : 1 -->
	<p>
		<input type="file" id="uploadFile" name="uploadFile" placeholder="증명사진" />
		<label for="uploadFile" class="btn btn-info btn-sm col-sm-1">증명사진선택</label>
	</p>
	<p id="pImg"></p>
	
	<hr />
	<p id="pFunc">
		<button type="button" class="btn btn-info btn-sm col-sm-1" id="btnPlus" >+</button>
		<button type="button" class="btn btn-danger btn-sm col-sm-1" id="btnMinus" >-</button>
	</p>
	 
	<p class="pArea">
		<input type="text" name="licenseVOList[0].licNo" id="licNo0" class="form-control col-sm-3 float-left" placeholder="자격증 번호">
		<input type="text" name="licenseVOList[0].licNm" id="licNm0" class="form-control col-sm-3 float-left" placeholder="자격증 명">
		<input type="date" name="licenseVOList[0].licDt" id="licDt0" class="form-control col-sm-3 float-left" placeholder="발급 일">
	</p>
	<p style="clear:both;"></p>
	 
	<p><input type="button" id="btnSubmit" value="등록" /></p>
</form>

</body>
</html>

EmployeeController.java

package kr.or.ddit.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.sun.org.apache.xpath.internal.operations.Mod;

import kr.or.ddit.service.EmployeeService;
import kr.or.ddit.vo.EmployeeVO;
import lombok.extern.slf4j.Slf4j;

// 스프링 프레임워크에게 컨트롤러임을 알려줌
// 스프링이 빈(bean,객체)으로 등록하여 관리
@Controller
@RequestMapping("/employee")
@Slf4j
public class EmployeeController {
	
	// 의존성 주입(Dependency Injection)
	@Autowired
	EmployeeVO myEmpVO;
	
	@Autowired
	EmployeeService employeeService;
	
	@ResponseBody
	@PostMapping("/createFormData")
	public String createFormData(EmployeeVO employeeVO) {
		log.info("createPost -> employeeVO : " + employeeVO);
		
		int result = this.employeeService.createPost(employeeVO); 
		log.info("createPost->result : " + result);
		
		return employeeVO.getEmpNo();
	}
}

CKEditor5 파일업로드

UploadController.java

package kr.or.ddit.utils;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.dao.AttachDao;
import kr.or.ddit.vo.AttachVO;
import lombok.extern.slf4j.Slf4j;

@Controller
@Slf4j
public class UploadController {
	
	@Autowired
	String uploadFolder;
	
	@Autowired
	String uploadFolderDirect;
	
	//static AttachDao attachDao => null이 메모리에 올라감
	@Autowired
	AttachDao attachDao;
	
	//CKEditor5 파일업로드
	// /image/upload
	// ckeditor는 이미지 업로드 후 이미지 표시하기 위해 uploaded 와 url을 json 형식으로 받아야 함
	// modelandview를 사용하여 json 형식으로 보내기위해 모델앤뷰 생성자 매개변수로 jsonView 라고 써줌
	// jsonView 라고 쓴다고 무조건 json 형식으로 가는건 아니고 @Configuration 어노테이션을 단 
	// WebConfig 파일에 MappingJackson2JsonView 객체를 리턴하는 jsonView 매서드를 만들어서 bean으로 등록해야 함 
	@ResponseBody
	@PostMapping("/image/upload")
	public Map<String, Object> image(MultipartHttpServletRequest request) throws IllegalStateException, IOException {
		ModelAndView mav = new ModelAndView("jsonView");
		
		// ckeditor 에서 파일을 보낼 때 upload : [파일] 형식으로 해서 넘어오기 때문에 upload라는 키의 밸류를 받아서 uploadFile에 저장함
		MultipartFile uploadFile = request.getFile("upload"); // upload 이름은 고정!
		log.info("uploadFile : " + uploadFile);
		
		//파일 명
		String originalFileName = uploadFile.getOriginalFilename();
		log.info("originalFileName : " + originalFileName);
		
		//originalFileName : 개똥이.jpg -> jpg
		//originalFileName.indexOf(".") : 확장자 .의 위치
		String ext = originalFileName.substring(originalFileName.indexOf("."));
		
		
		// 서버에 저장될 때 중복된 파일 이름인 경우를 방지하기 위해 UUID에 확장자를 붙여 새로운 파일 이름을 생성
		// asdfasdf.jpg
		String newFileName = UUID.randomUUID() + ext; 
		
		File f = new File(uploadFolderDirect);
		if(f.exists()==false) {
			f.mkdirs();
		}
		
		//저장 경로로 파일 객체를 저장하겠다는라는 계획
		// c:\\업로드 경로\\asdfasdf.jpg
		File file = new File(uploadFolderDirect, newFileName);
		
		//파일 복사
		uploadFile.transferTo(file);
		
		// 브라우저에서 이미지 불러올 때 절대 경로로 불러오면 보안의 위험 있어 상대경로를 쓰거나 이미지 불러오는 jsp 또는 클래스 파일을 만들어
		// 가져오는 식으로 우회해야 함
		// 때문에 savePath와 별개로 상대 경로인 uploadPath 만들어줌
		String uploadPath = "/springProj/resources/upload/" + newFileName;
		
		// uploaded, url 값을 modelandview를 통해 보냄
//      mav.addObject("uploaded", true); // 업로드 완료
//      mav.addObject("url", uploadPath); // 업로드 파일의 경로
		
		Map<String,Object> map = new HashMap<String, Object>();
		map.put("uploaded", true);
		map.put("url", uploadPath);
		
		log.info("map : " + map);
		return map;
	}
}

=> root-context.xml에 있는 이름, uploadFolderDirect에 적어둔 위치에 그대로 저장됨

<bean id="uploadFolderDirect" class="java.lang.String">
   <constructor-arg value="C:\\eGovFrameDev-3.10.0-64bit\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\webapps\\springProj\\resources\\upload"></constructor-arg>
</bean>

+ UploadController.java

@Autowired
String uploadFolderDirect;

해당 변수명의 이름과 root-context.xml에 있는 이름이 같아야함

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 21장 스프링 폼 태그 라이브러리 (0)	2024.05.10
[스프링 프레임워크] 20장 모델을 통한 데이터 전달 (0)	2024.05.09
[스프링 프레임워크] 18장 Ajax 방식 요청 처리 (0)	2024.05.08
[스프링 프레임워크] 17장 파일 업로드 (0)	2024.05.03
[스프링 프레임워크] 16장 컨트롤러 요청 처리3(폼 필드 요소 값을 매개변수로 처리) (1)	2024.05.02

스프링 프레임워크

[스프링 프레임워크] 18장 Ajax 방식 요청 처리

2024. 5. 8. 12:23

Ajax 방식 요청 처리

get 방식

BoardController.java

package kr.or.ddit.controller;

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 kr.or.ddit.dao.BoardDao;
import kr.or.ddit.vo.BoardVO;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
// 클래스 레벨 요청 경로 지정
@RequestMapping("/board")
public class BoardController {
    @RequestMapping(value="/ajaxHome") // 경로
    public String ajaxHome() {
        log.info("ajaxHome에 왔다");

        // forwarding : /views/ajaxHome.jsp
        return "ajaxHome"; //jsp 파일 (views 바로 밑에 ajaxHome 파일)
    }
}

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	/*
	요청URI : /register/hongkd
	pathVariable : hongkd
	요청방식 : get
	*/
	$("#rewgisterBtn01").on("click",function(){
		$.get("/register/hongkd",function(result){
			console.log("result : " + result);
			if(result==="SUCCESS") {
				alert("SUCCESS");
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
    /*
    요청URI : /register/hongkd
    pathVariable : hongkd
    요청방식 : get

    동일한 클래스 내에서 같은 이름의 메소드를 사용 : 오버로딩
    */
    @ResponseBody
    @GetMapping("/register2/{userId}")
    public String register01(
            @PathVariable("userId") String userId) {
        log.info("userId : " + userId);

        return "SUCCESS";
    }
}

결과 화면1 : 경로변수 클릭 시 콘솔창에 출력되어야 함, result 부분만 참고

post 방식

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	/*
	요청URI : /register/hongkd
	pathVariable : hongkd
	요청방식 : get
	*/
	$("#rewgisterBtn01").on("click",function(){
		$.get("/register/hongkd",function(result){
			console.log("result : " + result);
			if(result==="SUCCESS") {
				alert("SUCCESS");
			}
		});
	});
	
	$("#rewgisterBtn02").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		//아작나써유..(피)씨다타써
		/*
		요청URI : /register2/hongkd/pw01
		pathVariable : hongkd, pw01
		요청방식 : post
		*/
		$.ajax({
			url:"/register2/hongkd/pw01",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObject),
			type:"post",
			success:function(result){
				console.log("result : ", result);
				if(result==="SUCCESS") {
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	/*
	요청URI : /register2/hongkd/pw01
	pathVariable : hongkd, pw01
	요청방식 : post
	*/
	@ResponseBody
	@PostMapping("/register2/{userId}/{password}")
	public String register02(
			@PathVariable("userId") String userId,
			@PathVariable("password") String password) {
		log.info("userId : " + userId);
		log.info("password : " + password);
		
		return "SUCCESS";
	}
}

post 방식 (파라미터 받아옴)

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn03").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//JSON 오브젝트
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		//아작나써유..(피)씨다타써
		/*
		요청URI : /register03
		요청파라미터 : {userId:a001,password:java}
		요청방식 : post
		*/
		$.ajax({
			url:"/rewgister03",
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObject),
			type:"post",
			success:function(result){
				console.log("result : ", result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	/*
	요청URI : /register03
	요청파라미터 : {userId:a001,password:java}
	요청방식 : post
	*/
	@ResponseBody
	@PostMapping("/register03")
	//비동기로 JSON 데이터가 넘어올 때 @RequestBody를 사용
	public String register03(@RequestBody Member member) {
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		return "SUCCESS";
	}
}

JSON오브젝트

문자열 매개변수로 받기 => 불가능

=> JSON으로 보냄 -> String으로 받음

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn04").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//JSON 오브젝트
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		//아작나써유..(피)씨다타써
		/*
		요청URI : /register04
		요청파라미터(JSON->String) : {userId:a001,password:java}
		요청방식 : post
		*/
		$.ajax({
			url:"/register04",
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObject),
			type:"post",
			success:function(result){
				console.log("result : ", result);
				if(result==="FAILED"){
					alert("FAILED");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	<p><button type="button" id="rewgisterBtn04">경로변수4</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	/*
	요청URI : /register04
	요청파라미터(JSON->String) : {userId:a001,password:java}
	요청방식 : post
	*/
	@ResponseBody
	@PostMapping("/register04")
	public String register04(String userId,
			String password) {
		log.info("userId : " + userId);
		log.info("password : " + password);
		
		return "FAILED";
	}
}

문자열 매개변수로 받기 => 가능

=> ajax에서 url의 파라미터로 값 보냄 -> String으로 받음

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn05").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//JSON 오브젝트
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		//아작나써유..(피)씨다타써
		/*
		요청URI : /register05
		요청파라미터(JSON->String) : {userId:a001,password:java}
		요청방식 : post
		*/
		$.ajax({
			url:"/register05?userId="+userObject.userId+"&password="+userObject.password,
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObject),
			type:"post",
			success:function(result){
				console.log("result : ", result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	<p><button type="button" id="rewgisterBtn04">JSON오브젝트1</button></p>
	<p><button type="button" id="rewgisterBtn05">JSON오브젝트2</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	/*
	요청URI : /register05
	요청파라미터(JSON->String) : {userId:a001,password:java}
	요청방식 : post
	*/
	@ResponseBody
	@PostMapping("/register05")
	public String register05(String userId,
			String password) {
		log.info("userId : " + userId);
		log.info("password : " + password);
		
		return "SUCCESS";
	}
}

+번외 (파라미터를 추가하지 않고 바로 보내는 법)

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn0501").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//JSON 오브젝트
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		//아작나써유..(피)씨다타써
		/*
		요청URI : /register0501
		요청파라미터(JSON->String) : {userId:a001,password:java}
		요청방식 : post
		*/
		$.ajax({
			url:"/register0501",
			data:userObject,
			type:"post",
			success:function(result){
				console.log("result : ", result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	<p><button type="button" id="rewgisterBtn04">JSON오브젝트1</button></p>
	<p><button type="button" id="rewgisterBtn05">JSON오브젝트2</button></p>
	<p><button type="button" id="rewgisterBtn0501">JSON오브젝트501</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	/*
	요청URI : /register0501
	요청파라미터(JSON->String) : {userId:a001,password:java}
	요청방식 : post
	*/
	@ResponseBody
	@PostMapping("/register0501")
	public String register0501(String userId,
			String password) {
		log.info("userId : " + userId);
		log.info("password : " + password);
		
		return "SUCCESS";
	}
}

@PathVariable, @RequestBody 사용 => 가능

@PathVariable과 @RequestBody 모두 한꺼번에 사용할 수 있음

PathVariable : url 파라미터 값

RequestBody : JSON 데이터 값

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn06").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//JSON 오브젝트
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		$.ajax({
			url:"/register06/hongkd",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObject),
			type:"post",
			success:function(result){
				console.log("result : " + result);
				if(result==="SUCCESS") {
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	<p><button type="button" id="rewgisterBtn04">JSON오브젝트1</button></p>
	<p><button type="button" id="rewgisterBtn05">JSON오브젝트2</button></p>
	<p><button type="button" id="rewgisterBtn0501">JSON오브젝트501</button></p>
	<p><button type="button" id="rewgisterBtn06">JSON오브젝트6</button></p>
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	@ResponseBody
	@PostMapping("/register06/{userId}")
	public String register06(@PathVariable("userId") String userId,
			@RequestBody Member member) {
		log.info("userId : " + userId);
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		return "SUCCESS";
	}
}

객체 배열 타입 (List<Member>)

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#rewgisterBtn07").on("click",function(){
		let userObjectArray = [
			{"userId":"name01", "password":"pw01"},
			{"userId":"name02", "password":"pw02"}
		];
		
		$.ajax({
			url:"/register07",
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObjectArray),
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : " + result);
				
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="rewgisterBtn01">경로변수</button></p>
	<p><button type="button" id="rewgisterBtn02">경로변수2</button></p>
	<p><button type="button" id="rewgisterBtn03">경로변수3</button></p>
	<p><button type="button" id="rewgisterBtn04">JSON오브젝트1</button></p>
	<p><button type="button" id="rewgisterBtn05">JSON오브젝트2</button></p>
	<p><button type="button" id="rewgisterBtn0501">JSON오브젝트501</button></p>
	<p><button type="button" id="rewgisterBtn06">JSON오브젝트6</button></p>
	<p><button type="button" id="rewgisterBtn07">JSON오브젝트7</button></p>
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {
	@ResponseBody
	@PostMapping("/register07")
	public String register07(
		@RequestBody List<Member> memberList
	) {
		for (Member member : memberList) {
			log.info("userId : " + member.getUserId());
			log.info("password : " + member.getPassword());
		}
		
		return "SUCCESS";
	}
}

중첩된 자바빈즈

중첩된 자바빈즈(1:1)

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#registerBtn08").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//Member 자바빈 클래스 타입
		let userObject = {
			"userId":userId,
			"password":password,
			"address":{
				"postCode":"12345",
				"location":"대전 중구 대흥동 3"
			}
		};
		
		$.ajax({
			url:"/register08",
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObject),
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : " + result);
				
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="registerBtn08">중첩된자바빈즈</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {

	@ResponseBody
	@PostMapping("/register08")
	public String register08(
		@RequestBody Member member
	) {
		log.info("member : " + member);
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		Address address = member.getAddress();
		
		if(address != null) {
			log.info("postCode : " + address.getPostCode());
			log.info("location : " + address.getLocation());
		}
		
		return "SUCCESS";
	}
}

중첩된 자바빈즈(1:N)

ajaxHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#registerBtn08").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//Member 자바빈 클래스 타입
		let userObject = {
			"userId":userId,
			"password":password,
			"address":{
				"postCode":"12345",
				"location":"대전 중구 대흥동 3"
			},
			"cardList":[
				{"no":"23456", "validMonth":"24/05"},
				{"no":"12342", "validMonth":"27/03"}
			]
		};
		
		$.ajax({
			url:"/register08",
			contentType:"application/json;charset=UTF-8",
			data:JSON.stringify(userObject),
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : " + result);
				
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});
});
</script>
<h2>ajaxHome.jsp</h2>

<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content"
			name="content"></textarea>
	</p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><button type="button" id="registerBtn08">중첩된자바빈즈</button></p>
	
</form>

MemberController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Slf4j
@Controller
public class MemberController {

	@ResponseBody
	@PostMapping("/register08")
	public String register08(
		@RequestBody Member member
	) {
		log.info("member : " + member);
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		Address address = member.getAddress();
		
		if(address != null) {
			log.info("postCode : " + address.getPostCode());
			log.info("location : " + address.getLocation());
		}
        
		List<Card> cardList = member.getCardList();
		if(cardList != null) {
			for (Card card : cardList) {
				log.info("no : " + card.getNo());
				log.info("validMonth : " + card.getValidMonth());
			}
		}
		
		return "SUCCESS";
	}
}

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 20장 모델을 통한 데이터 전달 (0)	2024.05.09
[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리 (0)	2024.05.08
[스프링 프레임워크] 17장 파일 업로드 (0)	2024.05.03
[스프링 프레임워크] 16장 컨트롤러 요청 처리3(폼 필드 요소 값을 매개변수로 처리) (1)	2024.05.02
[스프링 프레임워크] 15장 컨트롤러 요청 처리2(Date 타입 처리, DateTimeFormat 애너테이션) (1)	2024.05.01

1 2 3 4 5 6 7 8 ··· 11

[스프링 프레임워크] 20장 모델을 통한 데이터 전달

[스프링 프레임워크] 20장 모델을 통한 데이터 전달

[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리

[스프링 프레임워크] 19장 파일업로드 Ajax 방식 요청 처리

[스프링 프레임워크] 18장 Ajax 방식 요청 처리

[스프링 프레임워크] 18장 Ajax 방식 요청 처리

'스프링 프레임워크' 카테고리의 다른 글

'스프링 프레임워크' 카테고리의 다른 글

'스프링 프레임워크' 카테고리의 다른 글

티스토리툴바