메뉴 건너뛰기

XE Guidebook

Events
2016.08.14 20:57

08-13 Form 지원 메서드

조회 수 6 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

● Form 지원 메서드

 

▶ submit()

 

웹 프로그램에서 <form> 태그는 클라이언트와 서버 간의 데이터 전송을 맡고 있는 요소로
“submit”은 form에 있는 데이터를 사용자가 지정한 곳에 보내는 역할을 한다.
 
jQuery에서는 다음과 같은 형식으로 사용하면 된다.
 
  .submit( handler(eventObject) )
 
.submit()을 호출하게 되면 정의된 handler를 실행하고,
리턴 받은 Boolean값을 통해 서버로 데이터 전송 유ㆍ무를 결정하게 된다.
 
  $('form').submit(function() {
    if($('#txtName').val() == '') {
      alert("이름을 입력하세요.");
      return false;
    }
    else {
      return true;
    }
  });
 
 

▶ serialize(), serializeArray() 

 
일반적으로 Form 데이터를 전송하게 되면 자동으로 직렬화된 데이터가 전달되지만,
서버와의 데이터 통신을 위해서는 form에 있는 데이터를 직렬화하거나
url을 통해 전달을 해야 할 경우가 있으며, 
특히 Ajax를 이용한 비동기 통신에서는 직렬화된 데이터가 많이 사용되고 있다.
 
이처럼 직렬화된 데이터를 쉽게 사용할 수 있도록,
jQuery에서는 form 데이터를 쉽게 직렬화시킬 수 있는 메서드를 제공하고 있다.
  
  .serialize()
  .serializeArray()
 
두 메서드의 역할은 동일하며, 반환되는 값에서만 차이가 난다.
.serialize() 메서드는 아래 예제에서 보는 바와 같이 form의 값을 직렬화된 형태로 반환하며,
.serializeArray() 메서드는 jQuery 배열 개체로 반환한다.
쿼리스트링을 통한 Ajax 관련 데이터를 만들 때에는 .serialize()를 사용하면 된다. 
 

( 예제 )

 
"submit" 버튼을 클릭하면,
"form#form1" 노드의 선택된 데이터가 직렬화 형태로 메시지 창에서 보여진다.
 
  $('#form2').submit( function () {
    var datas = $('#form1').serialize();
    alert(datas);
    return false;
  });

08-11-01 submit().gif

 

08-11-02  serialize().gif

 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4