Springboot 회원정보 수정 Ajax 이용하기

---

목표

회원정보 보기까지는 완료했는데 수정을 하기 위해서는 put이라는 것이 필요하다! 

uddate.jsp에서 form 태그에다가 method를 post는 할 수 있는 put같은것을 못만든다.

put이나 delete요청하기 위해 자바스크립트를 이용해야한다! 

 

버튼을 클릭했을때 업데이트라는 함수를 주려고한다. 

 

만약에 버튼이 form 태그 안에 있으면 폼이 가지고 있는 어떤 이벤트를 발생하는데 폼은 데이터를 가지고 전송할떄 사용하는것이라서 순수한 버튼태그로 바꿔야한다. 

 

제이쿼리도 사용할수 있다. 왜냐하면 헤더에

<!-- 제이쿼리 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

추가해놨기떄문이다. 

// (1) 회원정보 수정
function update(userId) {
	
	let data  =$("#profileUpdate").serialize();
	
	console.log(data);
	
	$.ajax({
		type:"put",
		url:'/api/user/${userId}',
		data:data,
		conentType:"application/x-www-form-urlencoded;vhstdry=utf-8",
		dataType:"json"
	}).done(res=>{
		console.log("update 성공");
	}).fail(error=>{
		console.log("update 실패");
	});
}

ajax같은거는 요청을 하면 응답을 페이지나 파일을 응답하는것이 아니라 데이터를 응답해줘야한다.

데이터를 응답해주는 애들을 api라고 한다. 

 

package com.cos.photogramstart.web.api;

import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserApiController {

	@PutMapping("/api/user/{id}")
	public String update() {
		
	}
	
}

애가 받을수 있는 값들이 있는데 name, username 등등 값들 을 받기위한 DTO가 필요하다!

DTO를 만들때 이메일과 username 안받으니까 필요한 정보들만 가지고 만들수 있다. 

package com.cos.photogramstart.web.dto.user;

import com.cos.photogramstart.domain.user.User;

import lombok.Data;

@Data
public class UserUpdateDto {
	private String name; //필수
	private String password; // 필수 
	private String website;
	private String bio;
	private String phone;
	private String gender;
	
	public User toEntitiy() {
		return User.builder()
				.name(name)
				.password(password)
				.website(website)
				.bio(bio)
				.phone(phone)
				.gender(gender)
				.build();
	}
}

우리가 회원정보를 수정할떄 필수 값이 있고 필수값이 아닌것이 있는데 

필수가 아닌것들이 엔티티로 만들어지면 위험하다. 

나중에 수정할 예정이다.

 

package com.cos.photogramstart.web.api;

import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;

import com.cos.photogramstart.web.dto.user.UserUpdateDto;

@RestController
public class UserApiController {

	@PutMapping("/api/user/{id}")
	public String update(UserUpdateDto userUpdateDto) {
		System.out.println(userUpdateDto);
		return "ok";
	}
	
}

결과는 잘나오고 있다. 이제 userUpdateDto로 인서트 업데이트만 하면된다!