Rest api 응답을 화면으로 값 넘기는 법 질문
안녕하세요 제가 전에 질문을 조금 잘못 드린 것 같아 다시 질문 드립니다.. ㅠㅠ
항상 친절한 답변 감사드립니다!!
첫번째로 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("조회 실패.");
}
});
.
감사합니다.
0
답변 감사합니다!
혹시 그러면 저 맨 마지막 사진에 data[0]이나 data[1] 를 콘솔로 찍는게 아닌 화면에 표시해주려면 어떻게 하면 될까요??
클릭 버튼 밑에 보여주게 하고 싶습니다
이미지 업로드와 db 트랜잭션 묶는법
0
50
1
Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4
0
62
2
MessageSourceTest 코드
0
53
1
인터셉터 에러 설정
0
52
1
resolveArgument()메서드 질문
0
60
1
43강 검증1 에서 실패 로직 관련 질문있습니다.
0
64
2
타임리프 3.X 버전 rendering, serializer 에러 해결 방법
2
134
3
스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ
0
93
3
pdf 오타 문의
0
58
1
ItemUpdateForm 검증 관련 질문입니다.
0
52
1
22page 링크 주소 변경
0
59
2
특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문
0
53
1
섹션3번 수업에 대한 질문입니다.
0
85
2
@Autowired 보다 더 좋은 방법이 어떤 걸까요?
0
87
2
타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.
0
66
1
자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다
0
143
3
스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문
0
66
1
톰캣 에러 페이지가 안보입니다.
0
108
2
apiEceptionController에서 센드 에러 호출하면 안되는지?
0
81
1
세션 타임아웃시 쿠키 삭제 방법이 없나요?
0
120
2
ApiExceptionController 질문드립니다.
0
64
1
셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?
0
67
1
MemberRepository 필드의 fianl 선언 유무
0
86
2
혹시 index.html 에서는 fragment 사용이 안되는건가요
0
60
1