제이쿼리 ajax를 사용하여 JSON 타입 데이터 주고받기

<script>

//아이디가 btnSubmit인 버튼을 클릭시
	//1) 아이디가 boardNo인 요소의 값을 boardNoVal 변수에 할당.
	//2) ajax 구문을 작성(url(/board/boardNo),contentType(application/json;charset=utf-8), data, type(get), success )
	//3) data는 json데이터(boardNo:boardNoVal)
	
	//url : 요청경로
	//contentType : 보내는 데이터 타입
	//dataType : 응답데이터 타입
	//data : 요청시 전송할 데이터
	//type : get,post,put
	//요청 URI : /board/100
	$(function(){
    
	$('#btnSubmit').on('click',function(){
		
		 let boardNoVal = $('#boardNo').val();
/* 		 let data = {'boardNo': boardNoVal}; */
		$.ajax({
			url : "/board/"+boardNoVal,
			data : JSON.stringify({'boardNo': boardNoVal}),
			contentType : "application/json;charset=utf-8",
			type : 'post',
			success : function(result){
			//ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS",HttpStatus.OK);
			console.log('result:'+result);
			alert('안녕하세요');
			}
			
		}); //ajax끝
	});
  });  
</script>


<form>
		<p><input type="text" name="boardNo" id="boardNo" /></p>
		<p><input type="button" id="btnSubmit" value="전송" /></p>
	</form>

	/* 경로패턴매핑
	 * 요청경로를 동적으로 표현이 가능한 경로 패턴을 지정할 수 있음.
	 * - URL 경로 상의 변하는 값을 경로변수(PathVariable)로 취급함.
	 * - 경로변수에 해당하는 값을 파라미터 변수(매개변수-파라미터를 받아 값을 저장한느 변수)에 설정 할 수 있음.
	 */
	
	//요청URI : /board/100 => 100은 boardNo(게시판 기본키)
	//요청방식 : get
@PostMapping("/board/{boardNo}")
	public ResponseEntity<String> read(@PathVariable("boardNo")int boardNo){
		log.info("boardNo :"+boardNo);
		
		ResponseEntity<String> entity = new ResponseEntity<String>("SUCCESS",HttpStatus.OK);
	
		return entity;
	
	}

 

 

 

JSON데이터를 받을 땐 @RequestBody
JSON데이터로 응답할땐 @ResponseBody

 

	$('#goHome0301').on('click',function(){
		
		$.ajax({
			url : '/board/goHome0301',
			type : 'get',
 			dataType : 'json', 
			success : function(result){
				console.log(JSON.stringify(result)); //string으로 바꿈
				console.log(result); //객체

				let lprodId = result.lprodId;
				let lprodGu = result.lprodGu;
				let lprodNm = result.lprodNm;
				
				$('input[name=lprodId]').val(lprodId);
				$('input[name=lprodGu]').val(lprodGu);
				$('input[name=lprodNm]').val(lprodNm);
			}
		});//ajax끝
		
	});
    
    <form>
		<p><input type="text" name="lprodId" readonly /></p>
		<p><input type="text" name="lprodGu" readonly /></p>
		<p><input type="text" name="lprodNm" readonly /></p>
		<p><input type="button" id="goHome0301" value="goHome0301" /></p>
	</form>

	//요청url : /board/goHome0301
	//JSON데이터를 받을 땐 @RequestBody
	//JSON데이터로 응답할땐.. @ResponseBody
	@ResponseBody
	@GetMapping("/board/goHome0301")
	public LprodVO home0301() {
		log.info("home0301에 왓다");
		
		LprodVO lprodvo = new LprodVO();
		lprodvo.setLprodId(999);
		lprodvo.setLprodGu("P909");
		lprodvo.setLprodNm("컴퓨터제품");
		//forwarding도 아니고 redirect도 아님.
		//자바빈 객체가 json으로 보내짐
		return lprodvo;
	}

 

 

 

	//goHome04
	$('#goHome04').on('click',function(){
		//1) 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
				};
		$.ajax({
			url : '/board/goHome04',
			data : JSON.stringify(data),
			contentType : "application/json;charset=utf-8",
			dataType:'json',
			type : 'post',
			success : function(result){
				console.log("result::"+ JSON.stringify(result));
			}
		});
	});

<form>
		<p><input type="text" name="lprodId" readonly /></p>
		<p><input type="text" name="lprodGu" readonly /></p>
		<p><input type="text" name="lprodNm" readonly /></p>
		<p><input type="button" id="goHome0301" value="goHome0301" /></p>
	</form>
	
	<form>
		<p><input type="button" id="goHome04" value="goHome04" /></p>
	</form>

	//요청URI : /board/goHome04
	//요청 파라미터 : {"lprodId":lprodId, "lprodGu":lprodGu,"lprodNm":lprodNm};
	//방식 : post
	//리턴타입 : json

	@ResponseBody //json타입으로 리턴
	@PostMapping("/board/goHome04")
	public List<LprodVO> goHome04(@RequestBody LprodVO lprodVO) {
		log.info("lprodVO는?" + lprodVO);
		List<LprodVO> lprodVOList = new ArrayList<LprodVO>();
		
		LprodVO vo1 = new LprodVO();
		vo1.setLprodId(2);
		vo1.setLprodGu("P102");
		vo1.setLprodGu("전자제품");
		
		lprodVOList.add(vo1);
		
		LprodVO vo2 = new LprodVO();
		vo2.setLprodId(3);
		vo2.setLprodGu("P103");
		vo2.setLprodGu("문구류");
		
		lprodVOList.add(vo2);
		
		log.info("lprodVOList : "+lprodVOList);
		
		return lprodVOList;
		
	}