RestApi 반환 값 자바스크립트에서 처리를 어떻게 해야되나요??

4월 16일조회 144

게시글 작성 기능을 자바스크립트로 post요청을 보내서 처리하는데 컨트롤러에서 게시글 생성 후 리턴값을 ResponseEntity.status(HttpStatus.OK).body(저장된 객체) 이렇게 했습니다. 근데 여기서 자바스크립트에서 객체를 어떻게 받아야될지 모르겠습니다..

질문을 추천하시나요?

답변 2

정지우님의 프로필 사진

프런트단에서 어떻게 API에서 내려준 response를 받는지에 대한 질문을 주셨는데 프런트 단에 대한 내용이 없어서 답변을 주기가 쉽진 않지만 일반적으로 javascript(jquery)를 사용해서 response를 받을 때 예시를 드리겠습니다. $.ajax({ type: "POST", url: 게시글 작성 API , data: 게시글 데이터, success: function(response) { //성공 했을 때 const res= JSON.parse(response); console.log(res); }, error: function(xhr, status, error) { //실패 했을 때 console.error(error); } }); success에서 console을 찍어서 내려 받은 response가 어떤 형태 인지를 직접 보고 활용하시면 됩니다.

커리어리 AI 봇님의 프로필 사진

REST API를 호출한 결과는 다양한 형식으로 반환될 수 있습니다. 대표적으로는 JSON, XML 등이 있습니다. 여기서는 JSON 형태로 반환하는 것을 가정하고 답변을 드리겠습니다. 자바스크립트에서 REST API 호출 후 JSON 형태의 응답을 처리하기 위해서는 XMLHttpRequest 객체를 사용하거나, fetch API를 사용하는 방법이 있습니다. 1. XMLHttpRequest를 사용하는 방법은 아래와 같습니다. 이 코드에서는 POST 메서드로 /api/post 경로에 JSON 형태의 데이터를 전송합니다. 응답으로 JSON 형태의 데이터를 받아와서 파싱하여 처리합니다. 2. fetch API를 사용하는 방법은 아래와 같습니다. 이 코드에서는 fetch 함수를 사용하여 POST 메서드로 /api/post 경로에 JSON 형태의 데이터를 전송합니다. 응답으로 JSON 형태의 데이터를 받아와서 처리합니다. 3. 반환된 JSON 데이터는 객체 형태로 사용할 수 있습니다. 예를 들어, 게시글 객체의 속성 중에서 title 속성값을 출력하고자 할 경우 아래와 같이 사용할 수 있습니다. 더 자세한 내용은 MDN 웹 문서에서 확인할 수 있습니다. XMLHttpRequest Fetch API

1#1
2const xhr = new XMLHttpRequest();
3xhr.open('POST', '/api/post', true);
4xhr.setRequestHeader('Content-Type', 'application/json');
5xhr.onreadystatechange = function() {
6  if (xhr.readyState === 4 && xhr.status === 200) {
7    const post = JSON.parse(xhr.responseText);
8    console.log(post);
9  }
10}
11xhr.send(JSON.stringify({ title: '제목', content: '내용' }));
12
13#2
14fetch('/api/post', {
15  method: 'POST',
16  headers: {
17    'Content-Type': 'application/json'
18  },
19  body: JSON.stringify({ title: '제목', content: '내용' })
20})
21.then(response => response.json())
22.then(data => console.log(data))
23.catch(error => console.error(error));
24
25#3
26const title = post.title;
27console.log(title);

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

기술, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

이메일로 가입하기