jQuery Form 관련 메서드 정리

jQuery form 관련 메서드를 정리해보겠습니다. 웹 프로그램에서 Form은 매우 중요한 요소입니다. 물론 웹프로그램을 만들 필요가 없다면 별로 중요하지 않을 수 있습니다.  사용자의 데이터를 서버로 전송하는 역할을 합니다. 

form하면 항상 등장하는 메서드가 submit()입니다. "submit"는 form에 있는 데이터를 사용자가 지정한 곳에 보내는 역할을 합니다.

jQeury에서 지원하는 .submit() 도 동일한 역할을 합니다.

.submit(handler(eventObject))를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있습니다. submit()를 클릭하게 되면 정의된 handler가 실행이 되어 실행되고 난 후 결과에 따라 서버로 데이터를 전송 할 것인지 말 것인지를 결정하게 됩니다.

일반적인 사용방법은 다음과 같습니다.

function SendData() {

   if(document.getElementById("txtName").value == '')

   {

         alert("자료를 입력하세요");

         return;

   } else {

        document.form.submit();

   }

}

위 방법을 jQuery에서 제공하는 .submit()를 사용하면 다음과 같습니다.

$('form').submit(function() {

   if($('#txtName').val() = '') {

         alert('자료를 입력하세요');

         return false; 

   } else {

        return ture;

   }

});

조금 형태만 달라졌을 뿐이지 기본적인 개념은 기존과 동일합니다. 사용하는데 큰 어려움 없이 바로 사용할 수 있을 것입니다.

서버와의 데이터 통신을 위해서 form에 있는 데이터를 직렬화 하거나 url을 통해 전달하는 경우가 있습니다. 특히 Ajax를 이용한 비동기 통신에서는 데이터 직렬화를 많이 사용하고 있습니다. 이런 데이터를 직렬화를 위해서 jQuery에서는 form 데이터를 직렬화 시킬 수 있는 메서드를 제공하고 있습니다.

.serialize(), serializeArray()

   

메서드의 명칭이 직렬화 입니다.  두 메서드의 역할은 동일하며, 반환되는 값에서 약간의 차이가 있을 뿐입니다.

.serialzie()는 선택한 form의 값을 'data=1&form=2&button=3'의 형태로 반환하며,  .serializeArray() 메서드는 jQuery 배열 개체로 반환합니다.

Ajax관련 데이터를 만들 때는 .serialize()를 사용하시면 됩니다.

<form>

  <div><input type="text" name="a" value="1" id="a" /></div>

  <div><input type="text" name="b" value="2" id="b" /></div>

  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>

    <textarea name="d" rows="8" cols="40">4</textarea>

  </div>

  <div><select name="e">

    <option value="5" selected="selected">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

  </select></div>

  <div>

    <input type="checkbox" name="f" value="8" id="f" />

  </div>

  <div>

    <input type="submit" name="g" value="Submit" id="g" />

  </div>

</form>

$('form').submit(function() {

  alert($(this).serialize());

  return false;

});

결과값은 a=1&b=2&c=3&d=4&e=5 의 형태로 나타날 것입니다.

.serializeArray()는 다음과 같이 사용됩니다.

<form>

  <div><input type="text" name="a" value="1" id="a" /></div>

  <div><input type="text" name="b" value="2" id="b" /></div>

  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>

    <textarea name="d" rows="8" cols="40">4</textarea>

  </div>

  <div><select name="e">

    <option value="5" selected="selected">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

  </select></div>

  <div>

    <input type="checkbox" name="f" value="8" id="f" />

  </div>

  <div>

    <input type="submit" name="g" value="Submit" id="g" />

  </div>

</form>

$('form').submit(function() {

  console.log($(this).serializeArray());

  return false;

});

결과값은 다음과 같습니다.

[

  {

    name: "a",

    value: "1"

  },

  {

    name: "b",

    value: "2"

  },

  {

    name: "c",

    value: "3"

  },

  {

    name: "d",

    value: "4"

  },

  {

    name: "e",

    value: "5"

  }

]

  웹프로그램을 만들때 쿼리스트링을 만들기 위해 많은 노력을 합니다.일면 노가다 작업이라고 합니다. 그런 작업을 하지 않아도 된다는 것입니다. form 데이터를 전송하게 되면 자동으로 직렬화가 이루어지지만, Ajax와 같은 특수한 상황에서는 정말로 필요한 메서드라고 생각합니다.