ajax, url 파싱

$.ajax({
        type: 'POST',
        url: '/post/api',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data)
    })

@PostMapping이 적용되어 있는 메소드의 리턴 값이 void라고 가정한다면 위 ajax는 오류를 발생시킨다. 그 이유는 dataType 때문이다. dataType은 서버에서 뷰로 받아오는 데이터의 형식을 지정한 것인데, 서버에서 아무것도 리턴하지 않으니 오류가 나는 것이다.

반대로 contentType은 뷰에서 서버로 데이터를 전송할 때 데이터 형식을 지정한 것이다.

 

 

예전에 rest api 형식의 게시판을 직접 짤 때 PUT이나 DELETE를 수행하기 위해 게시판의 id를 가져와야 했다. 그래서 @PutMapping("/post/api/{id}")와 같은 형식으로 메소드를 작성했다. 그러나 id를 결국에는 ajax를 통해 전달해 주어야 하는데, url 파싱을 어떻게 할지 몰라 결국 게시판의 번호를 뷰에 노출시키고 그 값을 ajax를 통해 서버로 전달했었다.

그러나 내가 원하던 방식은 네이버 게시판처럼 게시물의 번호가 뷰에는 노출되지 않는 것이었다. url을 얻어오고 맨 마지막의 id만을 가져오기 위해 구글링한 결과 다음과 같은 코드를 알 수 있었다.

this.href.substring(this.href.lastIndexOf('/') + 1)

이를 그대로 복붙해서 적용한 결과 바로 에러가 났다. 에러는 this.href에 substring이라는 메소드는 없다는 내용이었는데, 이를 해결하기 위해 현재 페이지의 url을 받아와 변수에 저장하고, 그 변수에 substring 메소드를 실행시켰다.

let url = window.location.href;
let id = url.substring(url.lastIndexOf('/') + 1);

그 결과 에러 없이 잘 작동하였다.

 

---

참고

https://stackoverflow.com/questions/4758103/last-segment-of-url-in-jquery

 

https://velog.io/@cksdnr066/Ajax-%EC%9A%94%EC%B2%AD%EC%97%90%EC%84%9C-dataType-%EA%B3%BC-contentType%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B8%EA%B9%8C

 

https://www.thewordcracker.com/jquery-examples/javascript-get-current-url-path/