form 비동기(ajax) 전송

업무를 하다보면 front의 데이터를 back으로 던질 때 비동기로 전송하는 경우가 많다. 이럴 때 데이터가 적다면 js기준(익스플로러 10 이상)

const form = new FormData();
form.append(key, value);
form.append(key, value);

로 붙여서 전송하면 되지만... 업무의 대부분은 기존 form을 submit 하던 것을 비동기로 바꾸는 작업이 많기도 하다... 그럼 이때 back에서 form을 그대로 받고 싶은데 어떻게 해야할까?

물론 form의 데이터가 4~5개면 개발자가 직접 append해서 보내면 되는데. 실제 submit하는 데이터가 4~5개 인곳은 적을것이다... 결제 로직은 한번 결제에 요청되는 데이터가 어마어마 하니까...그걸 하나하나 찍고 있는 것보다 form에 input으로 다 담고 한번에 던질 순 없을까? 했는데 jquery를 좋아하진 않지만 $().serialize()가 form 데이터로 전송이 가능하도록 직렬화를 해준다.

jquery를 사용해서 ajax를 실제로 사용하면

function func(){
	
  const f = document.form;
  const data = $(f).serialize();

  const ajax = $.ajax({
    type : 'method',
    url : 'url',
    dataType : 'json',
    data : data
  });
  //성공
  ajax.done(function(res){
    console.log(res);
  });
  //실패
  ajax.fail(function(res){
    alert(res.responseJSON.error[0].msg);
  });
}

다음과 같이 form을 먼저 직렬화 URL 인코딩 표기법으로 텍스트 문자열을 생성한 form을 받을 수 있다.

backend에서는

@RequestParam Map map<String,String>
@RequestParam 클래스

로 받아주면 Servlet이 처리해준다!

front 개발자가 아니여서 이게 맞는지는 모르겠는데... 누군가 아는 분이 내 글은 본다면 댓글로 꼭 알려주시면 감사합니다...

참고
jquery serialize 공홈 문서