[SpringBoot] ajax - application/json 로 요청하기!

# ajax - application/json

 jQuery ajax 의 contentType이 application/json; charset=utf-8 일 때, @ResponseBody로 파라미터 매핑하기

# 환경

/**
 * tool: STS 4.13.0
 * version: 2.7.3-SNAPSHOT
 * java: 1.8
 * type: MAVEN
 * view: THYMELEAF
 * jQuery: 3.6.0
 */

# page

# html (일부분 발췌)

<h3>jsonView, ResponseBody (application/json)</h3>
<input type="text" id="json" placeholder="Json Test" style="display: inline;"/>
<br>

<input type="button" onclick="test.json('json1')" value="jsonView" style="display: inline;"/>
<input type="button" onclick="test.json('json2')" value="ResponseBody" style="display: inline;"/>
<br>

# function (일부분 발췌)

const test = {
    json: function(type) {
        const value = $('#json').val();
        if(value) {
            const input = {
                text: value,
                html: '<div>Hello World<div>',
                script: '<script>function test() { alert("hello world!");}<\/script>',
            }
            sendJson(`/test/send/${type}`, input,
                function(result) {
                    console.log(result.text);
                    console.log(result.html);
                    console.log(result.script);
                },
            );
        } 
    },
}

# jQuery ajax (일부분 발췌)

function sendJson(url, input, cbSuccess) {
    $.ajax({
        // options
            url         : url,
            method      : "POST",
            data        : JSON.stringify(input),
            contentType : 'application/json; charset=utf-8',
            dataType    : "json", 
            beforeSend  : function(jqXHR, settings) {
                // throw '에러';
                // return false;
            }
        // success
        }).done(function(output, textStatus, jqXHR) {
            if(typeof cbSuccess === 'function') {
                cbSuccess(output);
            }
        // error	
        }).fail(function(jqXHR) {
            console.log("ERROR");
        // complete
        }).always(function(output, textStatus, jqXH) {
            console.log("COMPLETE");
        }
    );
}

# @Controller (일부분 발췌)

@Slf4j
@Controller
@RequestMapping("/test/send")
public class TestSendController {

	@PostMapping("/json1")
	public ModelAndView json1(ModelAndView mav, @RequestBody Map<String, Object> input) {
		log.debug("[PARAMETER] {}", input);
		String text   = (input.containsKey("text")) ? (String) input.get("text") : "";
		String html   = (input.containsKey("html")) ? (String) input.get("html") : "";
		String script = (input.containsKey("script")) ? (String) input.get("script") : "";
		
		mav.setStatus(HttpStatus.OK);
		mav.setViewName("jsonView");
		mav.addObject("text", text);
		mav.addObject("html", html);
		mav.addObject("script", script);
		return mav;
	}
	
	@PostMapping("/json2")
	@ResponseBody
	public TestSendPVO json2(@RequestBody TestSendPVO testSendPVO) {
		log.debug("[PARAMETER] {}", testSendPVO);
		return testSendPVO;
	}
}

# 내용

 ajax의 contentType이 application/json; charset=utf-8 일 때

@GetMapping, @PostMapping 메소드에서 ajax 파라미터 받는 법 정리는 아래와 같다. 

1. 사용 가능한 경우.
   • @RequestBody 로 VO를 설정하고, VO의 변수명과 ajax 파라미터의 변수명이 같으면 됨. (=json2)
   • @RequestBody 를 Map<String, Object> 으로 설정하면 됨. (=json1)
2. 사용 불가능한 경우.
   • @RequestParam 으로 받을 경우.
   • @ModelAttribute 로 받을 경우.
   • Annotation이 없을 경우.

# ajax 요청 방식에 따른 파라미터 맵핑 방법.

https://hjho95.tistory.com/14 ajax settings
https://hjho95.tistory.com/7 application/x-www-form-urlencoded
https://hjho95.tistory.com/8 application/json
https://hjho95.tistory.com/9 form tag
https://hjho95.tistory.com/10 multipart/form-data
https://hjho95.tistory.com/12 PUT, PATCH, DELETE
https://hjho95.tistory.com/11 POST 방식으로 PUT, PATCH, DELETE 사용하기

# ajax 시리즈의 참조 페이지.

@RequestBody: https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/RequestBody.html

ajax settings: https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings