[JQuery] Ajax + JSON으로 데이터 보내기

Ajax 기본 형식을 알아두면 어디든 쓰인다

$(document).ready(function(){
		$('#checkOut').on("click", function(){
			var adminFile = {
				"TMPLAT_ID" : robot.sysdate("PR05"),
				"TMPLAT_DVS_CD" : $('select[id="tmplat_dvs_cd"]').val(),
				"TMPLAT_NM" : $('#tmplat_nm').val(),
				"TMPLAT_COURS" : $('#tmplat_cours').val(),
				"OBJCT_USE_YN" : $('input[name="objct_use_yn"]:checked').val(),
				"TMPLAT_CTNT" : $('#tmplat_ctnt').val()
			}
			
			$.ajax({
				url : "/adminDevFile.do",
				type : "POST",
				data : JSON.stringify(adminFile),
				dataType : "text",
				contentType: "application/json",
				success : function(data){
					if(data == 'success'){
						alert('등록 성공');
                        document.location.reload();
					}else if(data == 'fail'){
						alert('등록 실패. 내용을 확인해주세요');
					}
				},
				error : function(){
					alert('통신 실패');
				}
			});
			
		});
	})

adminFile이라는 변수를 선언해서 JSON형식으로 데이터를 담아준다.

다음 비동기 통신인 Ajax을 이용해서 데이터를 전송한다.

 

- url : 데이터를 보낼 url

- type : 데이터를 전송할 타입(GET, POST,..)

- data : 보낼 데이터

- dataType : 결과를 받을 데이터 형식

- contentType : 보낼 데이터 형식

- success : 성공 시 처리할 내용

- error : 실패 시 처리할 내용

 

JSON으로 데이터를 보낼 땐 JSON 형식인 데이터를 String 형태로 변환시켜 보낸다.

자바스크립트가 아닌 컨트롤러로 데이터를 보내기 때문이며,

자바스크립트가 아닌 다른 언어와의 통신에서는 반드시 JSON.stringify()를 사용해야 한다.

 

자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어서

데이터 교환 목적으로 많이 사용된다.

 

데이터 전송 성공 이후 success 함수안에 document.location.reload(); 를 통하여

입력했던 값을 초기화 할 수 있다.

@RequestMapping(value = "/adminDevFile.do")
	@ResponseBody
	public String adminDevFile(@RequestBody Map<String, Object> paramMap, HttpSession session) {
		
		paramMap.put("CRTR_ID", session.getAttribute("userId"));
		int check = view020101Service.adminDevFile(paramMap);
		
		if(check > 0) {
			return "success";
		}else {
			return "fail";
		}
		
	}

컨트롤러에서 보낸 JSON데이터를 받는 방법은 위와 같다

 

@ResponseBody 어노테이션을 붙이면 리턴되는 값이 View를 통해 출력되지 않고,

HTTP Response Body에 직접 쓰여지게 된다. 

 

스프링에서는 위 방식을 통해 Ajax통신을 한다.

(데이터만 주고받는 용도의 Controller인 경우 @RestController를 사용하기도 한다)

 

그러고나서 매개변수로 String화 되어있는 JSON데이터를 받아오는데

데이터가 많은 경우 Map을 사용하면 매우 유용하다

 

@RequestBody어노테이션을 붙여주면 간단하게 Map을 통해 JSON데이터를 받아올 수 있다.

 

여기까지 JQuery를 이용한 비동기 통신 Ajax에 대해 알아보았다.