serialize() 이용 간단히 form 값을 서버로 넘기는 방법 (ajax 사용)

serialize() 이용 간단히 form 값을 서버로 넘기는 방법 (ajax 사용)

페이지 구성중 버튼으로 서버와 데이터 통신을 해야 하는 경우가 있습니다. 

 

사용 하는 방법을 예로 들겠습니다. 

<form id="testForm" name="testForm"> <input type="text" name="pageIndex" id="pageIndex" value="1" /> <input type="text" name="searchKeyword" id="searchKeyword" value="2" /> <input type="text" name="pkList" id="pkList1" value="no1" /> <input type="text" name="pkList" id="pkList2" value="no2" /> <input type="text" name="pkList" id="pkList3" value="no3" /> <button type="button"  name="btn" id="btn" value="test" class="btnChk">확인</button> </form> <script>   var $form = $("#testForm");   $form.find(".btnChk").on('click', function(e){     console.log($form.serialize());     alert($form.serialize());     $.ajax({       dataType: 'json', type : 'post', url: '/test/submit', // <<-- 처리 요청 URL data: $form.serialize(), }).done(function(data) { $form.attr('action', '/test/list');  //<<-- 처리 이후 리턴 페이지 $form.submit(); });  }); </script>

*.java (프레임 워크 기반)

@RequestMapping("/submit") @ResponseBody public Map<String, Object> submit(@AuthenticationPrincipal LoginVo loginVo, TestVo testVo)throws Exception{ Map<String, Object> resultMap = new HashMap<>(); // values setting 값을 세팅하고 // action 실행할 메소드를 호출한다.  testService.testmethod(testVo); // result return resultMap.put("result", "success"); return resultMap; }

간단히 test 이름으로 jsp <-> java간 통신을 구현해 봤다. 

다시 설명하자면 

    클라이언트(사용자PC) <------>서버 부분을 구현 한부분이다. 

사용자가 보는 페이지에서 버튼등을 통해 이벤트를 발생시에 

서버에 요청하여 데이터처리가 필요한 일반 적인 경우에 사용 되는 부분이다.

Chk :  serialize() 는 file type 값은 처리 하지 않기 때문에 파일 첨부에서는 사용할 수 없다. 

출처: https://tnsgud.tistory.com/81 [Soon Gud Story]