인프런 커뮤니티 질문&답변
작성한 질문수
Rest api 응답을 화면으로 값 넘기는 법 질문
해결된 질문
작성
·
1.7K
·
수정됨
0
안녕하세요 제가 전에 질문을 조금 잘못 드린 것 같아 다시 질문 드립니다.. ㅠㅠ
항상 친절한 답변 감사드립니다!!
첫번째로 ResponseBody가 붙지 않은 메소드는 model에 데이터를 담아 해당 view로 가져가서 ${data} 이런식으로 사용 하는것 까지는 이해했습니다!
controller
@GetMapping("/ui/test" )
public String RequestUiTest(Model model){
log.info("테스트");
List list = new ArrayList();
list.add("a");
list.add("b");
model.addAttribute("data",list);
return "/ui/test";
}
html
<div th:text="${data}"> data </div>
두번째 ResponseBody가 붙은 메소드는 model에 담지 않고 리턴 값으로 데이터를 넘기는데 그렇다면 화면에서는 어떻게 써야 할지 의문입니다..!!
전에 답변 주신 대로 자바스크립트 부분 쪽에 data에 list 값이 다 들어 있지만 실제로 이 list를 화면에서 어떻게 뽑아 사용 해야 하는지 잘 모르겠습니다..
controller
@ResponseBody
@GetMapping("/ui/test2")
public List RequestUiTest(){
log.info("테스트");
List list = new ArrayList();
list.add("a");
list.add("b");
return list;
}
html
<div th:text="${data}"> data </div> // 여기에서 값이 안 나오고 있습니다 어떻게 사용해야 나오는지 모르겠습니다..
$("#test").click(function(){
// ajax 통신
$.ajax({
type : "GET",
url : "/ui/test2",
success : function(res){
alert("조회 성공");
const data = res;
console.log("data ",data); // 여기까지 확인했습니다!
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("조회 실패.");
}
});
});
답변 1
0
.(점)을 붙이거나 json['key'] 필드 값을 출력할 수 있습니다.
코드를 참고해주세요.
패키지 구조
Member
package com.example.jquery.member;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Member {
private Long id;
private String name;
}
MemberController
package com.example.jquery.member;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
@Controller
public class MemberController {
@GetMapping("/")
public String home() {
return "index";
}
@ResponseBody
@GetMapping("/member")
public Member getMember() {
return new Member(1L, "member");
}
}
templates/index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button id="test">click</button>
<script>
$( document ).ready(function() {
$("#test").click(function(){
// ajax 통신
$.ajax({
type : "GET",
url : "/member",
success : function(res){
const data = res;
console.log("data = " + data);
console.log("data.name= " + data.name);
console.log("data.id= " + data.id);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("조회 실패.");
}
});
});
});
</script>
</body>
</html>
build.gradle
plugins {
id 'java'
id 'org.springframework.boot' version '2.7.6'
id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
compileOnly {
extendsFrom annotationProcessor
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf:'
compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
useJUnitPlatform()
}
결과
++추가
첨부하신 예시로는 배열처럼 인덱스로 접근하면 됩니다.
@ResponseBody
@GetMapping("/test")
public List<String> RequestUiTest(){
List<String> list = new ArrayList<>();
list.add("a");
list.add("b");
return list;
}
// ajax 통신
$.ajax({
type : "GET",
url : "/test",
success : function(res){
const data = res;
console.log("data[0] = " + data[0]);
console.log("data[1] = " + data[1]);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("조회 실패.");
}
});
.
감사합니다.
답변 감사합니다!
혹시 그러면 저 맨 마지막 사진에 data[0]이나 data[1] 를 콘솔로 찍는게 아닌 화면에 표시해주려면 어떻게 하면 될까요??
클릭 버튼 밑에 보여주게 하고 싶습니다