front와 back 데이터 주고 받기

최준호·2021년 12월 16일
0

업무

목록 보기
4/31

업무를 진행하며 front와 back 데이터를 주고 받는 방법에 대해 정리해놓으려고 한다. 리팩토링을 하게 되면 대부분 서비스 쪽만 보다가 가끔 새로운 기능의 추가나 동기 방식을 비동기로 처리할때 말고는 front와 back 데이터를 주고 받는 것을 생각할 일이 거읭 없기 때문에 항상 까먹어서 맨날 찾기 귀찮다...

데이터를 전송하는 방법은 크게 2가지로 나뉠거 같다.
1. 기본적인 form submit
2. ajax통신을 위해 javascript 객체 자체를 json 형태로 넘기는 json 전송

form 전송

submit으로 전송

<form>
  <input name="id" value="junho"/>
  <input name="pw" value="password"/>
</form>

형태의 데이터를 전송할 경우

@RequestMapping(value="url")
public String login(UserLogin user) throws Exception{
	
	return "page";
}
class UserLogin{
    String id;
    String pw;
    
    public UserLogin(){}
    
    public String getId();
    public String getPw();
    public void setId(id){
        this.id = id;
    }
    public void setPw(pw){
        this.pw = pw;
    }
}

다음과 같은 형태로 form을 전달 받을 수 있다. 그리고 데이터를 받는 객체의 경우 넘어오는 form의 key값과 일치하게 적어주어야한다. 또한 이경우 사실

@RequestMapping(value="url")
public String login(@ModelAttribute UserLogin user) throws Exception{
	
	return "page";
}

@ModelAttribute annotation이 적용되어 있는 상태이고 Spring에서는 해당 annotation을 생략하고 기본값이 아닌 객체를 넣었을 때 자동으로 인식하기 때문에 생략이 가능한 것이다. 만약 객체의 별명을 설정해주고 싶다면 @ModelAttribute("별명")으로 입력해주면 된다.

비동기로 전송

비동기 form 데이터 전송

form 비동기 전송(jquery 사용)

비동기 form 데이터 받기

@RequestMapping(value="url", produces = "application/json; charset=utf8")
@ResponseBody
public ResponseEntity<Object> login(UserLogin user) throws Exception{

	return new ResponseEntity(new Object obj, HttpStatus.OK);
}

다음과 같은 방법으로 동일하게 사용 가능하다.

json 전송

profile
코딩을 깔끔하게 하고 싶어하는 초보 개발자 (편하게 글을 쓰기위해 반말체를 사용하고 있습니다! 양해 부탁드려요!) 현재 KakaoVX 근무중입니다!

0개의 댓글