[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 by 승연아빠님

웹 프런티어와 함께 하는 jQuery 기초강좌

16th - jQuery FORM API

폼(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() 동일한 역할을 하고 있으며 다음과 같은 형태를 가지고 있습니다.

.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 데이터를 쉽게 직렬화 시킬 수 있는 메서드를 제공하고 있습니다.

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

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

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

.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>

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

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

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

jQuery 시리즈 강좌 리스트

[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery강좌] 10. jQuery Traverse - Filtering
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery강좌] 12. jQuery Traverse - Tree Traversal
[jQuery강좌] 13. jQuery Core
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery강좌] 18. jQuery Event - bind() 메서드
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery강좌] 20. jQuery Performance

jQuery 시리즈 동영상 강좌 리스트

[출처] SQLER.COM [출처] SQLER.COM http://www.sqler.com/387921

감사합니다.

승연아빠(io2tree@live.com)

HoonsNET ASP.NET Sysop

ASP.NET MVP

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

[jQuery강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님 (0)	2011.08.09
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드 by 승연아빠님 (0)	2011.08.08
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여 by 승연아빠님 (0)	2011.08.08
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여 by 승연아빠님 (0)	2011.08.08
[jQuery강좌] 13. jQuery Core by 승연아빠님 (0)	2011.08.08

WVC-VisionFlag

[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 by 승연아빠님

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

티스토리툴바

[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 by 승연아빠님

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

'프로그램&DB/jQuery&JS' Related Articles

티스토리툴바