프로젝트 진행 중 주문번호를 입력하면 ajax를 이용해 비동기 형식으로 해당 주문번호의 상세정보들을 출력하게 만들고 싶었다.

기존에 그냥 주문번호 박아놓고 조회 진행하다가.. 실제로 구현되는거는 주문번호 하나가 아니니까...

사실 현재 주문 리스트를 실시간으로 출력하고 해당 리스트에서 출력된 주문번호에 ajax걸어서 출력하려고 했는데...
테스트하기위한 주문내역이 1도 없어서 ^^.......개가튼...

여튼 당장은 동작하는것을 코알못분들에게 보여줘야하기 때문에 급한대로 input 박스에 주문번호를 입력하고 버튼을 누르면 주문번호에 대한 상세 정보를 출력하게 만드는 중이었다...

POST로 요청하는데 orderIds가 안보내지는 것이었다 ㅠ

기존코드 >>>

$('#orderDetailBtn').click(function (){
        var orderIds = $('#orderIds').val();
        console.log(orderIds);
        $.ajax({
            type: "POST",
            url: "/orderDetail",
            contentType: "application/json",
            data: "orderIds=" + orderIds,
			....

이 상태로 실행할 경우 출력되는 오류 메시지는 이렇다.

2023-07-21 14:30:14.525  WARN 13140 --- [nio-9099-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'orderIds' for method parameter type String is not present]

이 오류 메시지에 대해서 구글링하면 전부 contoller의 @RequestParam 에
required=false를 추가해주라는 말밖에 없었다 ㅡㅡ 심지어 스택오버플로우에서조차.... 하...
근데 내 오류는 이게 아니었고...
심지어 필수로 넘겨줘야하는 데이터인데 required=false를 추가하면 오류가 해결된다는게 말인가?,,.,
추가하면 null이 넘어갈것이 뻔한디?

구글링하는 것을 포기하고
지피티에게 도움을 요청해보니 contentType을 변경하라고 했다
그래서 바꾸니까 진짜 말짱하게 되는것이 아니겠는가?!!

변경코드 >>>

$('#orderDetailBtn').click(function (){
        var orderIds = $('#orderIds').val();
        console.log(orderIds);
        $.ajax({
            type: "POST",
            url: "/orderDetail",
            contentType: "application/x-www-form-urlencoded",
            data: "orderIds=" + encodeURIComponent(orderIds),
            .....
//// controller단
@PostMapping("/orderDetail")
@ResponseBody
    public String gerOrderDetail(@RequestParam("orderIds")String orderIds){
        JSONArray orderDetails = smartStoreUtil.getOrderDetail(orderIds);
        return orderDetails.toString();

그럼 도대체
application/x-www-form-urlencoded와 application/json의 차이가 무엇이길래 나같은 빡대갈은 쉽게 해결하지 못했는가??

Content-Type이란?

api연동할때 보내는 자원을 명시하기 위해서 사용.
HTTP 요청을 보낼 때 사용되는 헤더 중 하나로, 요청 본문의 데이터 타입을 지정하는 역할을 한다.
요청에 포함된 데이터가 어떤 형식으로 인코딩되었는지 서버에게 알려주는 역할을 한다.
이는 서버가 요청을 올바르게 처리하고 데이터를 파싱하는 데 도움을 준다.
MessageBody에 들어가는 타입을 HTTP Header에 명시해주는 필드이다.

application/x-www-form-urlencoded

웹 양식 데이터를 인코딩하는데 사용되는 기본 데이터 유형!
주로 HTML 폼 요소에서 사용자로부터 입력된 데이터를 서버로 전송하는데 사용하며 API요청에서도 사용된다.

• 형식 : 데이터의 각 키-값 쌍을 '&'기호로 구분하고, 각 키와 값은 '='기호로 연결하여 인코딩한다.
• 데이터 표현 : 단순 키-값 쌍 데이터를 표현하는데 적합하다. 부족한 구조의 데이터를 표현하기 어렵다.
• 인코딩 형식이 단순하여 구현이 간단하고, 브라우저에서 웹 폼을 통해 쉽게 전송 가능. 중첩 데이터 구조표현이 어려우며 특히 JSON표현에는 적합하지 않다.

application/json

데이터 교환 형식으로 많이 사용된다. 서버와 클라이언트 간에 구조화된 데이터를 교환하는데 사용한다. 웹 어플리케이션과 API에서 데이터를 전송하고 수신하는데 자주 사용된다.

• 형식 : JSON형식으로 데이터를 표현. 키-값 쌍을 중괄호{}로 둘러싸고, 각 키와 값은 콜론:으로 연결. 각 데이터 항목은 쉼표로 구분.
• 데이터 표현 : 복잡한 데이터 구조를 효과적으로 표현. 중첩된 객체와 배열을 포함하여 다양한 데이터 구조를 지원한다.
• 데이터 구조의 유연성과 표현력이 뛰어남. 데이터 크기가 커질 수 있으며, 인코딩과 디코딩에 비용발생 가능성 있음.

---

👌세줄요약

1. application/x-www-form-urlencoded 는 간단한 폼 데이터를 전송하는 데 유용
2. application/json 은 구조화된 데이터를 교환하는 데 적합
3. 요즘엔 JSON 자주 씀
4. 지피티가 가끔은 해결책도 내준다.
5. 사실 세줄 아님