form안의 데이터를 한 번에 묶어 ajax로 전송하기

jsp의 form 안에 있는 name 데이터들을 한번에 묶어 controller로 전송하는 방법.

 

var data = $("form[name=XXX]").serialize();

로 묶어주고,

 

ajax의 data는

data: data 로 보내주면 된다.

 

예제 : form안에 있는 이름과 연락처 정보를 한번에 묶어 보내기.

<form method="post" id="findEmail" name="findEmail" action="<%=request.getContextPath()%>/findEmail">
  <label>이름</label>
  <input type="text" class="form-control" placeholder="실명을 입력하세요." id="user_name" name="user_name">
  <label>연락처</label>
  <input id="user_phone" name="user_phone" value="">
</form>
<button type="button" class="btn" id="findEmailBtn">이메일 찾기</button>


<script type="text/javascript">
$(function(){
  $('#findEmailBtn').click(function(){
    var data = $("form[name=findEmail]").serialize();	
    $.ajax({
      type: 'post',
      url: '<%=request.getContextPath()%>/findEmail',
      data: data,
      success: function(result) {
      alert('정보 전송 성공')
      }     
    });
  })
})

</script>

  @ResponseBody
  @PostMapping("/findEmail")
  public String findEmailPost(String user_name, String user_phone) {
    System.out.println(user_name);
    System.out.println(user_phone);
    return "";
  }

 

실행 결과