반응형

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 값은 처리 하지 않기 때문에 파일 첨부에서는 사용할 수 없다. 



반응형

+ Recent posts