[메타코딩] 스프링부트 강좌 38강(블로그 프로젝트) - 회원가입 하기 Ajax요청

user.js를 생성하여 아래와 같이 작성합니다.

let index = {
	init: function() {
		$('#btn-save').on('click', () => { // function(){}, ()=>{} this를 바인딩하기 위해서!!
			this.save();
		});
	}
	
	, save: function() {
//		alert('user의 save함수 호출됨');
		let data = {
			user: $('#username').val(),
			password: $('#password').val(),
			email: $('#email').val()
		};
		
//		console.log(data);
		
		// ajax호출시 default가 비동기 호출
		// ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 insert 요청!!
		// ajax가 통신을 성공하고 서버가 json을 리턴해주면 자동으로 자바 오브젝트로 변환해준다.
		$.ajax({
			type : 'POST',
			url : '/blog/api/user',
			data : JSON.stringify(data), // http body데이터
			contentType : 'application/json; charset=utf-8', // body데이터가 어떤 타입인지(MIME)
			dataType : 'json' //요청을 서버로해서 응답이 왔을 때 기본적으로 모든 것이 문자열 (생긴게 json이라면) => javascript 오브젝트로 변환
		}).done(function(resp) {
			alert('회원가입이 완료되었습니다.');
//			console.log(resp);
			location.href = '/blog';
		}).fail(function(error) {
			alert(JSON.stringify(error));
		}); 
	}
}

index.init();

 

- ajax를 통한 회원가입 요청하기

위에서 jquery 라이브러리의 ajax를 통해 서버쪽으로 회원가입 서비스를 호출합니다.

이때 송신하는 데이터에 대해서는 json형태로 하여 보내주며, contentType도 작성 된 내용과 같이 작성합니다.

또한, response에 대해 dataType을 json으로 받겠다고 명시합니다.

(강의 내용 중 jquery버전 상승으로 인해 dataType을 명시하지 않아도 자동적으로 object형태로 변환해줍니다.)

 

- UserApiController.java 생성

package com.cos.blog.controller.api;

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.cos.blog.dto.ResponseDto;
import com.cos.blog.model.User;

@RestController
public class UserApiController {

	@PostMapping("/api/user")
	public ResponseDto<Integer> save(@RequestBody User user) {
		
		return new ResponseDto<Integer>(HttpStatus.OK, 1);
	}
}

 

데이터를 반환하기때문에 RestContorller 어노테이션을 선언했으며, save메소드에 대해 반환타입은 ResponseDto<Integer>로 했습니다.

 

- ResponseDto.java

package com.cos.blog.dto;

import org.springframework.http.HttpStatus;

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

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
	HttpStatus status;
	T data;
}

ResponseDto는 Generic 파라미터를 받아 처리하게 하였습니다.

Generic에 대한 자세한 설명은 아래 링크를 참고하세요.

https://jehuipark.github.io/java/java-generic

[JAVA] 제네릭(Generic)이란

 

 

 

 

강의 주소 : https://youtu.be/809058DGUPo