기록하는 코더

[Spring] ajax 데이터 처리 본문

JAVA/spring

[Spring] ajax 데이터 처리

damda_di 2023. 2. 2. 12:04

 

Controller

package kr.or.ddit.controller;

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

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
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.ResponseBody;

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

@Slf4j
@Controller
public class PracticeController {
	
	// 요청 URI : /practice/ajaxHome
	@GetMapping("/practice/ajaxHome") // 경로상의 변수 PathVariable
	public String ajaxHome() {
		// forwarding
		return "practice/ajaxHome";
	}
	
	/* 경로 패턴 매핑
	요청 경로를 동적으로 표현이 가능한 경로 패턴으로 지정할 수 있음
	- URI 경로 상의 변하는 값을 경로 변수(PathVariable)로 취급함
	- 경로 변수에 해당하는 값을 파라미터 변수(매개변수-파라미터를 받아 저장하는 변수)에 설정할 수 있음
	*/
	// 요청 URI : / board/100 => 100은 boardNo(게시판 기본키)
	// 요청방식 : get
//	@GetMapping("/board/100") // 기존방식
	@PostMapping("/board/{boardNo}") // 경로상의 변수 PathVariable
	public ResponseEntity<String> read(@PathVariable("boardNo") int boardNo) {
		log.info("boardNo : " + boardNo);
		// String을 응답할 것임
		ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
		return entity;
	}
	
	// 요청 URI : /board/goHOme0301
	// JSOJ데이터를 받을 땐 @RequestBody
	// JSON데이터로 응답할 땐 @ResponseBody
	@ResponseBody
	@GetMapping("/board/goHome0301")
	public LprodVO home0301() {
		log.info("home0301에 왔다");
		
		LprodVO lprodVO = new LprodVO();
		lprodVO.setLprodId(1);
		lprodVO.setLprodGu("P101");
		lprodVO.setLprodNm("컴퓨터 제품");
		// forwarding도 아니고 redirect도 아님
		// 자바빈 객체가 JSON으로 보내짐
		return lprodVO;
	}
	
	// 요청 URI : /board/goHOme04
	// 요청파라미터(json) : {"lprodId" : lprodId, "lprodGu" : lprodGu, "lprodNm" : lprodNm}
	// 방식 : post
	// 리턴타입 : json
	@ResponseBody
	@PostMapping("/board/goHome04")
	public List<LprodVO> home04(@RequestBody LprodVO lprodVO) {
		log.info("home04에 왔다");
		log.info("lprodVO : " + lprodVO);
	
		List<LprodVO> lprodVOList = new ArrayList<LprodVO>();
		LprodVO vo1 = new LprodVO();
		vo1.setLprodId(2);
		vo1.setLprodGu("P102");
		vo1.setLprodNm("전자제품");
		
		lprodVOList.add(vo1);
		return lprodVOList;
	}
	
}

 

jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<script text="text/javascript" src="/resources/js/jquery-3.6.0.js"></script>
<title>도서관리시스템</title>
<script>
$(function(){
	// 아이디가 btnSubmit인 버튼을 클릭 시
	// 1) 아이디가 boardNo인 요소의 값을 boardNoVal 변수에 할당
	$("#btnSubmit").on("click",function(){
// 		alert("click이벤트")
		var boardNoVal = $("#boardNo").val();
		
		if(boardNoVal == ""){
			alert("전송할 데이터 값이 없습니다.")
			return false;
		}
		
	// 3) data는 json데이터 {boardNo : boardNoVal}
	let data = {boardNo : boardNoVal};
		
	// 2) ajax구문을 작성. (url(/board/+boardNoVal)
	// 					, contentType()
	//					, data, type(get), success)
	// 3) data는 json 데이터 {boardNo:boardNoVal}
	// 아작나써유. 피씨다타써
	// ajax p contentType data type sucess
	// url :  요청경로
	// contentType : 보내는 데이터 타입
	// dataType : 응답 데이터 타입
	// data : 요청 시 전송할 데이터
	// type : get, post, put
	// 요청 URI : /board/100	
		$.ajax({
			url : "/board/"+boardNoVal,
			contentType : "application/json; charset=utf-8",
			data : JSON.stringify(data),
			type : "post",
			success : function(res){
// 				ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
				// result : SUCCESS
				$("#result").html(res);
				console.log(res);
			},
			error : function(xhr){
				alert(xhr.status)
			}
		});
	});
	// goHome0301 버튼을 클릭 시
	// ajax로 /board/goHome0301 URI를 요청(방식 : get)
	// success로
	
	
	$("#goHome0301").on("click",function(){
		$.ajax({
			url: "/board/goHome0301",
			type: "get",
			data : "json",
			success: function(res){
				console.log(JSON.stringify(res));
				code = "";
				code += "lprodId : " + res.lprodId + "<br>";
				code += "lprodGu : " + res.lprodGu + "<br>";
				code += "lprodNM : " + res.lprodNm + "<br>";
				
				let lprodId = res.lprodId;
				let lprodGu = res.lprodGu;
				let lprodNm = res.lprodNm;
				
				$("#result").html(code);
				
				$("input[name='lprodId']").val(lprodId);
				$("input[name='lprodGu']").val(lprodGu);
				$("input[name='lprodNm']").val(lprodNm);
			},
			error : function(xhr){
				alert(xhr.status);
			}
		});
		
		// goHome04
		$("#goHome04").on("click",function(){
			// 1) name이 lprodId, lprodGu, lprodNm인 요소의 value를 각각의 이름의 변수에 담은 후
			// 	data 오브젝트 변수에 json 데이터로써 저장해보자
			// 2) 요청 URI는 /board/goHome04
			// 3) JSON.stringify(data)를 데이터로 담아 요청해보자
			// 4) type은 post
			// 5) success는 result 변수로 콜백해보자
			
			let lprodId = $("input[name='lprodId']").val();
			let lprodGu = $("input[name='lprodGu']").val();
			let lprodNm = $("input[name='lprodNm']").val();
			
			let data = {"lprodId" : lprodId, "lprodGu" : lprodGu, "lprodNm" : lprodNm};
			console.log("보냄");
			console.log(data);
			
			$.ajax({
				url:"/board/goHome04",
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify(data),
				type : "post",
				success : function(res){
					console.log(res)
					console.log(JSON.stringify(res));
					
					$("#result").html(JSON.stringify(res));
					
				},
				error : function(xhr){
					alert(xhr.status);
				}
				
			})
			
			
			
		})
	});
});

</script>
</head>
<body>
<div id="result"></div>
	<form>
		<p><input type="text" name="boardNo" id="boardNo" /></p>
		<p><input type="button" id="btnSubmit" value="전송" /></p>
	</form>
	
	<form>
		<p><input type="text" name="lprodId" value="" readonly /></p>
		<p><input type="text" name="lprodGu" value="" readonly /></p>
		<p><input type="text" name="lprodNm" value="" readonly /></p>
		<p><input type="button" id="goHome0301" value="goHome0301" /></p>
	</form>
	
	<form>
		<p><input type="button" id="goHome04" value="goHome04" /></p>
	</form>
	
</body>
</html>

 

 

저작자표시 비영리 변경금지 (새창열림)

'JAVA > spring' 카테고리의 다른 글

[Spring] 페이징 처리  (0) 2023.02.09
[Spring] form 태그 라이브러리  (0) 2023.02.06
[Spring] 파일 다운로드  (0) 2023.02.02
[Spring] Mybatis - resultMap  (0) 2023.01.31
[Spring] 파일업로드 MultipartFile  (0) 2023.01.27
'JAVA/spring' Related Articles more