ajax 통신 과정

1. 자바스크립트 파일

 

function subscribeInfoModalOpen(pageUserId) {
	$(".modal-subscribe").css("display", "flex");

	$.ajax({
		url: `/api/user/${pageUserId}/subscribe`,
		dataType: "json"
	}).done(res => {
		console.log(res);
		res.data.forEach((u)=>{
			let item = getSubscribeModalItem(u);
			$("#subscribeModalList").append(item);
		});
	}).fail(error => {
		console.log("구독정보 불러오기 오류", error);
	});
}

2. apicontroller 파일

 

	@GetMapping("/api/user/{pageUserId}/subscribe")
	public ResponseEntity<?> subscribeList(@PathVariable int pageUserId, @AuthenticationPrincipal PrincipalDetails principalDetails){
		List<SubscribeDto> subscribeDto = subscribeService.구독리스트(principalDetails.getUser().getId(), pageUserId);
		return new ResponseEntity<>(new CMRespDto<>(1, "구독자 정보 리스트 가져오기 성공", subscribeDto), HttpStatus.OK);
	}

3.  CMRespDto.java 파일

 

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class CMRespDto<T> {

	
	private int code; // 1(성공), -1(실패)
	private String message;
	private T data;
}

4. SubscribeDto.java 파일

 

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
public class SubscribeDto {

	private int id;
	private String username;
	private String profileImageUrl;
	private Integer subscribeState;
	private Integer equalUserState;
}

이렇게 파일들이 있을 때,

자바스크립트 파일 메서드로 인해 Ajax 통신이 이뤄진다.

그 중간에 console.log(res); 이렇게 코드를 입력해 놓았는데,

웹 사이트에서 f12 버튼을 눌러서 console 창을 띄우면

 

아래와 같은 정보를 얻어낼 수 있다.

 

즉 console.log(res); 의 결과물이다.

이는, 2. apicontroller 파일에서

return new ResponseEntity<>(new CMRespDto<>(1, "구독자 정보 리스트 가져오기 성공", subscribeDto), HttpStatus.OK);

이와 같이, subscribeDto 를 리턴하라고 했기 때문에,

subscribeDto 결과값(id, username, profileImageUrl, subscribeState, equalUserState)을 확인할 수 있는 것이다.

 

그리고 1. 자바스크립트 파일을 보면 

이 정보를 활용하여 또 다른 함수인 getSubscribeModalItem에 사용하는 것을 알 수 있다.

 

 

위 결과물에서 사용자 정보를 이용할거라서, res.data 코드를 통해 

	res.data.forEach((u)=>{
	let item = getSubscribeModalItem(u);

이와 같이 사용한다.

 

 

참고 자료 : 이지업 강의 사이트 "스프링부트 SNS 프로젝트 - 포토그램 만들기 "