반응형

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



반응형
반응형

serialize() 

폼(form) 요소 name 값(value)를 

문자열로 변환(encoding) 하는 함수

: 데이터를 보내기 위해 jsp 에 form 요소를 문자열로 코딩 해주는 스크립트 함수 이다.

.serialize() 함수는 표준 URL_encode 표기법으로 텍스트 문자열을 만든다. 

 <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());

});

</script>

위  소스를 실행해서 [확인] 버튼을 누르면 콘솔 로그와 alert 창으로 $form.serialize() 된 문자열을 확인해 볼수 있다. 

그 값은 다음과 같다.

 pageIndex=1&searchKeyword=1&pkList=no1&pkList=no2&pkList=no3

여기서 조금 이상함을 느낄것이다

serialize() 는 name 의 이름과 값을 조합하여 문자열을 만든다는 점이다. 

그렇다면 마지막 button 태크의 값이 안보인다?

누구에게는 당연한 이야기 일수 있으나 잠시 설명 하도록 한다. 

button 태그는 값은 value 를 사용 한다고 해도 값이 넣어지는 태그는 아니다. (value 값이 없는 태그이다)

만일 button 태그를 input으로 변경 했다고 했을때 값이 넣어지는 것은 아니다. 

<button type="button"  name="btn" id="btn" value="test" class="btnChk">확인</button>

변경 ==> <input type="button"  name="btn" id="btn" value="test" class="btnChk" value="확인" />

input button type에서 value 는 버튼 위에 보이는 텍스트 이름을 표시 할 뿐이다.

Chk : 폼요소는 반드시 name 속성이 있어야 한다. 

        checkboxes 와 radio button 은 선택 된것만 포함 된다.

        file,button 속성은 포함 되지 않는다. (radio 예외)

 


반응형

+ Recent posts