huns_개발공부

JQuery와 Java Spring을 이용한 프로젝트에서 JQuery 쪽의 ajax에서 Get Method를 이용한 통신을 Post Method를 이용한 통신으로 변경하였을 때 java에서 설정한 Parameter의 값이 넘어오지 않는 현상 발견!

기존 Get을 이용한 ajax 통신

아래와 같은 코드를 이용하였을 때는 java쪽에 parameter가 정상적으로 처리가 되었습니다.

• JQuery 코드

let param = $('#inquiry-form').serialize();

$.ajax({
type : "GET",
url : urlPrefix+'/inquiry/sendInquiry',
data : param,
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data){
$('.flex-input-box').removeClass('error')
if(data["code"] == "200"){
window.location.href = urlPrefix+'/inquiry/complete'
}else{
alert(data["message"]);
}
}
})

- java 코드

@RestController
@RequestMapping("${signplus.url-prefix.front}/inquiry")
public class FrontInquiryController {

@Autowired
HttpApiConnectionUtill httpApiConnectionUtill;

@GetMapping()
public String view() {
    return "front/inquiry/inquiry";
}

@GetMapping("/complete")
public String complete() {
    return "front/inquiry/complete";
}

@GetMapping("/sendInquiry")
public ResponseEntity<JSONObject> sendInquiry(@RequestParam Map<String,Object> paramMap) throws URISyntaxException {

    JSONObject jsonObject = httpApiConnectionUtill.sendApiCallClientCredentials(ApiUrlConstants.util+"/sendInquiry", HttpMethod.POST, paramMap);

    JSONObject result = new JSONObject();
    result.put("code", jsonObject.get("code"));
    result.put("message", jsonObject.get("message"));

    return ResponseEntity.status(HttpStatus.OK).body(result);
}

}

### Post를 이용한 ajax 통신으로 변경

처음에 ajax 내의 method를 get -> post, java쪽 @GetMapping -> @PostMapping으로만 변경하면 동작 할 줄 알고 변경하였지만 parameter의 값이 넘어오지 않는 현상이 발견되었습니다.
이부분은 parameter가 전달되지 않은 채로 성공으로 처리되고 있어 발견하기 쉽지 않았습니다.

원인으로는 Get 메소드와 ajax에서 data로 넘겨주는 form 태그의 serialize()의 내용을 제대로 이해하지 못해 나타난 오류였습니다.

@GetMapping에서는 웹 브라우저나 다른 클라이언트가 URL의 쿼리 파라미터를 통해 데이터를 전송합니다.
예를 들면, https://example.com/inquiry?param1=value1&param2=value2와 같은 형태입니다.
@RequestParam은 이러한 쿼리 파라미터를 쉽게 받아올 수 있도록 도와줍니다.
이전 코드에서 ajax의 contentType을 json 형식으로 넘긴다고 정의하였었지만 실제로는 Get 메소드의 특징에 의해 쿼리스트링으로 전달되고 있었던겁니다.

그러나, @PostMapping을 사용할 때는 요청 본문(body)에 데이터가 포함되어 전송됩니다.
@PostMapping을 이용하여 ajax를 통해 본문으로 json 형태로 넘긴다고(contentType) 명시하였지만 실제로는 serialize()를 이용하여 URL-encoded로 보내려고 했으니 해당 부분이 json이 아니어서 @RequestParam 으로 parameter를 받으려고 했지만 값이 제대로 넘어가고 있지 않았던 겁니다.

해결책으로는 2가지가 있습니다.

1. ajax를 이용하여 data를 보낼 때, json 형식으로 변경, java에서 @RequestBody를 이용하여 parameter 받아오기
2. ajax를 이용하여 기존과 동일하게 URL-encoded로 전송, 단, 위의 코드에서 contentType으로 json으로 보낸다는 부분 제거 또는 URL-encoded 명시적으로 설정


#### 수정한 코드

- JQuery

let param = $('#inquiry-form').serialize();

$.ajax({
type : "POST",
url : urlPrefix+'/inquiry/sendInquiry',
data : param,
dataType : 'json',
success : function(data){
$('.flex-input-box').removeClass('error')
if(data["code"] == "200"){
window.location.href = urlPrefix+'/inquiry/complete'
}else{
alert(data["message"]);
}
}
})

- java

@RestController
@RequestMapping("${signplus.url-prefix.front}/inquiry")
public class FrontInquiryController {

@Autowired
HttpApiConnectionUtill httpApiConnectionUtill;


@PostMapping("/sendInquiry")
public ResponseEntity<JSONObject> sendInquiry(@RequestParam Map<String,Object> paramMap) throws URISyntaxException {

    JSONObject jsonObject = httpApiConnectionUtill.sendApiCallClientCredentials(ApiUrlConstants.util+"/sendInquiry", HttpMethod.POST, paramMap);

    JSONObject result = new JSONObject();
    result.put("code", jsonObject.get("code"));
    result.put("message", jsonObject.get("message"));

    return ResponseEntity.status(HttpStatus.OK).body(result);
}

}
```