jQuery
-
rest api 활용하기HTML, CSS, JavaScript 2021. 11. 5. 01:12
ajax를 이용하여 POST, PUT, DELETE는 어렵지 않게 구현할 수 있다. 그러나 항상 GET으로 json을 받아와서 화면에 어떻게 뿌리는 지 잘 몰라 thymeleaf를 이용하여 렌더링 하곤 했었다. 이를 제이쿼리를 통해 해결했다(물론 자바스크립트만으로도 가능하다) $(function() { $.ajax({ url: '/api/board', method: 'GET', dataType: 'json' }).done(function(json) { let boardBody = document.getElementById('boardBody'); for (const key in json) { boardBody.innerHTML += '' + '' + json[key].id + '' + '' + json[..
-
ajax, url 파싱HTML, CSS, JavaScript 2021. 9. 24. 00:24
$.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를 수행하기 위해..