개발자

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

2023년 04월 16일조회 270

게시글 작성 기능을 자바스크립트로 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#1
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/post', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const post = JSON.parse(xhr.responseText);
    console.log(post);
  }
}
xhr.send(JSON.stringify({ title: '제목', content: '내용' }));

#2
fetch('/api/post', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: '제목', content: '내용' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

#3
const title = post.title;
console.log(title);

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

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

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

또는

이미 회원이신가요?

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

실무, 커리어 고민이 있다면

새로운 질문 올리기

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