Ajax 기본적인 형태 (+pageable 예시)

 

 

 

Ajax - 페이지 이동없이 데이터 교환 및 화면 갱신 가능 (비동기 처리)

 

Ajax 문법

$.ajax({
	url: "",
	type: "",
	cache: ,
	dataType: "",
	data: "",
	success: function(data){

	},
	error: function (request, status, error){

	}
});

url : 요청 url

type : 데이터 전송방식( GET, POST)

만약 type 을 정해주지 않으면 기본적으로 GET 방식이 적용됨

 

cache : 요청 페이지 캐시 여부( false, true)

datatype : 서버에서 받아올 데이터를 어떤 형태로 해석 ( xml, json, html, script 선택)

data: 서버로 데이터 전송 시 사용

success : Ajax 통신 성공 시 실행

error : Ajax 통신 실패 시 실행 ( request, status, error 로 에러 정보 확인)

 

참고 자료 :

https://shxrecord.tistory.com/108

 

 

<예시>

 

ApiController.java

	@GetMapping("/api/image")
	public ResponseEntity<?> imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails, 
			@PageableDefault(size=3) Pageable pageable){

 

js 파일

function A() {
	$.ajax({
		url: `/api/image?page=${page}`,
		dataType: "json"

 

보통은, controller.java에서 

@GetMapping("/api/image") 라면,

js 파일의 ajax에서는

url : `api/image`로 받는다.

 

하지만, 여기서는 pageable 을 사용하기 때문에,

url: `/api/image?page=${page}`,

이런식으로 받았다. 

 

 

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