이전
목록
다음
j

jQuery Form API - 폼 지원 메서드에 대하여

jinmuk
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-07-14 (일) 19:13:51 · 5466 · 1

폼(form)을 위한 API

이번 시간에는 Form에 대한 이야기를 진행합니다.

웹 프로그램에서 Form은 매우 중요한 요소입니다. 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다. 


ASP.NET에서는 단일 폼의 형태로 구성이 되어 있었으며, 많은 부분이 Form에 대해 크게 신경을 쓰지 않아도 되는 부분이 있었습니다. 하지만 ASP.NET MVC가 나오면서 상황은 바뀌었습니다. 


ASP, PHP 처럼 Form을 직접적으로 컨트롤 하고, 다중 폼을 이용한 프로그래밍이 쉬워졌기 때문입니다. 

물론 ASP.NET도 Form을 통한 데이터 전달이나 이벤트 발생을 하고 있지만 대부분 개발자가 크게 신경을 써야 하는 부분이 적었던 반면에 ASP.NET MVC의 경우는 ASP 처럼 많은 부분에 Form에 대해 신경을 써야 합니다.


ASP.NET이 단일 폼만을 지원하는 것은 아니며, 흔히 말하는 꼼수를 사용하면 다중 폼도 아무런 문제 없이 사용이 가능합니다.


이번 강좌는 ASP.NET 개발자 보다는 ASP, PHP, ASP.NET MVC 개발자에게는 아주 큰 도움이 되지 않을까 하는 생각이 듭니다.


서론은 여기까지 하고, 바로 본론으로 들어가겠습니다.


Form 하면 꼭 등장하는 녀석이 바로 submit() 입니다.

“submit”은 form에 있는 데이터를 사용자가 지정한 곳에 보내는 역할을 하게 됩니다.


jQuery에서 지원하는 .submit() 동일한 역할을 하고 있으며 다음과 같은 형태를 가지고 있습니다.  

form_001.jpg


.submit(handler(eventObject) 를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있습니다. .submit()을 호출하게 되면 정의된 handler를 실행하고 리턴 받은 Boolean값을 통해 서버로 데이터 전송 유/무를 결정 하게 됩니다.


일반적으로 아래와 같은 방법을 사용을 하고 있습니다.

function sendSubmit() {
    if (document.getElementById("txtName").value == '')
    {
        alert("이름을 입력하세요.");
        return;
    }
    else
    {
        document.form.submit();
    }
}


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

$('form').submit(function() {
    if($('#txtName').val() == '') {
        alert("이름을 입력하세요.");
        return false;
    }
    else    {
        return true;
    }
});


약간의 형태만 달라졌지, 기본적인 개념은 기존과 동일하기 때문에 큰 어려움 없이 바로 사용 가능 합니다. 


서버간의 데이터 통신을 위해 form에 있는 데이터를 직렬화 하거나 url을 통해 전달을 하는 경우가 있습니다. 

특히나 Ajax를 이용한 비동기 통신에서는 데이터의 직렬화를 상당히 많이 사용하고 있습니다. 이럴 때를 위해서 jQuery에서는 form 데이터를 쉽게 직렬화 시킬 수 있는 메서드를 제공하고 있습니다.


바로 지금부터 설명드릴 아래의 두 녀석입니다.

form_002.jpg

 


메서드 이름부터가 직렬화입니다. 

두 메서드의 역할은 동일하며, 반환되는 값에서 약간의 차이를 보이고 있습니다.

.serialize()의 경우 선택한 폼의 값을 “a=1&b=2&c=3”등의 형태로 반환하며, .serializeArray() 메서드의 경우 jQuery 배열 개체로 반환합니다.


쿼리스트링을 통한 Ajax 관련 데이터를 만들 때는 .serialize()를 사용하시면 됩니다.


다음 예제를 통해 .serialize() 메서드 동작을 확인해 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; } 
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('form').submit(function () {
                var datas = $(this).serialize();
                alert(datas);
                return false;
            });
        });
    </script>
</head>
<body style="padding:10px;">    
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>    
        <form>
            <input type="text" name="a" value="1" id="a" /><br />
            <input type="text" name="b" value="2" id="b" /><br />
            <input type="hidden" name="c" value="3" id="c" /><br />          
            <select name="d">
            <option value="5" selected="selected">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            </select><br />            
            <input type="submit" name="f" value="Submit" id="f" />
        </form>
    </div>
</body>
</html>


form_003.jpg

[폼 데이터에 대한 값이 serialize 된 결과를 확인 할 수 있습니다. ]


이제 더 이상 쿼리스트링을 만들기 위해서 노가다 작업을 하지 않아도 된다는 아주 큰 희소식입니다. 

물론 일반적인 Form 데이터를 전송하게 되면 자동으로 직렬화 형태로 값이 전달이 되지만, Ajax와 같은 특수한 상황에서는 정말로 완소 메소드가 아닌가 싶습니다.

#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 1개

takumi22
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-07-14 (일) 23:36:31
앞으로 더 좋아지겠죠?
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,526
15-12-13 조회 2,937
15-12-11 조회 2,600
15-12-11 조회 2,564
15-12-11 조회 2,564
15-12-10 조회 2,522
15-12-10 조회 2,583
15-12-10 조회 2,557
15-12-03 조회 3,198
15-12-03 조회 2,716
15-11-25 조회 2,795
15-11-09 조회 3,145
15-11-04 조회 2,964
15-06-09 조회 4,086
15-05-06 조회 5,084
15-03-28 조회 4,566
14-12-05 조회 4,994
14-10-25 조회 5,049
14-10-13 조회 4,266
14-10-03 조회 6,204
14-09-19 조회 4,959
14-09-18 조회 4,046
14-09-13 조회 4,605
14-09-03 조회 5,595
14-08-26 조회 4,204
14-08-26 조회 4,001
14-08-26 조회 3,976
14-08-11 조회 6,457
14-08-06 조회 4,123
14-08-06 조회 3,719
14-08-06 조회 3,925
14-08-01 조회 6,293
14-08-01 조회 3,841
14-07-30 조회 4,435
14-06-28 조회 5,159
14-06-28 조회 4,433
14-05-11 조회 4,583
14-05-09 조회 4,942
14-05-09 조회 7,704
14-04-30 조회 4,311
14-04-27 조회 4,190
14-04-25 조회 4,893
14-04-21 조회 3,873
14-04-21 조회 4,998
14-04-10 조회 4,598
14-04-01 조회 6,152
14-03-03 조회 3,531
14-02-25 조회 5,918
14-02-14 조회 5,194
14-02-13 조회 4,947
14-01-03 조회 4,438
13-12-06 조회 3,764
13-11-22 조회 5,521
13-11-18 조회 4,024
13-10-02 조회 4,443
13-10-02 조회 3,692
13-10-02 조회 3,956
13-10-02 조회 3,814
13-10-02 조회 4,179
13-09-16 조회 8,027
13-09-16 조회 5,393
13-08-18 조회 5,412
13-07-11 조회 4,056
13-07-10 조회 4,688
13-07-09 조회 4,728
13-07-09 조회 4,984
13-07-04 조회 4,484
13-07-04 조회 4,118
13-07-04 조회 4,237
13-07-01 조회 4,720
13-07-01 조회 4,550
13-07-01 조회 6,803
13-06-23 조회 4,374
13-06-05 조회 3,624
13-05-29 조회 4,866
13-05-10 조회 4,273
13-04-05 조회 4,888
13-04-05 조회 6,577
13-04-05 조회 1.1만
13-04-05 조회 7,170
13-04-05 조회 6,561
13-03-31 조회 5,831
13-03-31 조회 4,158
13-03-28 조회 4,519
13-03-28 조회 6,714
13-03-28 조회 9,195
13-03-28 조회 4,329
13-03-24 조회 3,946
13-03-21 조회 4,619
13-03-21 조회 1.8만
13-03-14 조회 3,929
13-03-10 조회 4,744
13-03-10 조회 4,500
13-03-10 조회 4,200
13-03-08 조회 5,256
13-03-08 조회 4,365
13-03-03 조회 5,019
13-03-03 조회 7,466
13-03-03 조회 4,215
13-03-03 조회 1.1만
글쓰기