ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리
    프로그래밍/HTML5 Web 2016. 7. 10. 18:15
    반응형


    Sammy.js 라이브러리를 사용하면 요청 매개변수를 처리할수 있는데 여기서 말하는 요청 매개변수는 입력양식을 뜻하는것입니다.

    Sammy.js 라이브러리를 사용하면 웹 페이지 입력양식과 같은 데이터 요청을 모두 처리할수 있습니다.


    아래 코드는 글자를 입력하면 그 글자를 HTML 상으로 띄워주고 5초후에 다시 메인페이지로 돌아가는 기능을 가진 코드입니다.




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!DOCTYPE html>
     
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Sammy.js Basic</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script src="sammy.js"></script>
     
        <!-- 페이지 라우트 -->
        <script>
            var app = Sammy(function () {
                this.get('#/form'function () {
                    // 템플릿을 추출합니다.
                    var template = $('#form').text();
                    // 화면에 반영합니다.
                    $('body').html(template);
                });
                this.get('#/result'function () {
                    //Extract Request
                    var name = this.params['name'];
     
                    //Show
                    $('body').empty();
                    $('<h1></h1>').text(name).appendTo('body');
     
                    //After 5Seconds
                    setTimeout(function () {
                        history.back();
                    }, 5 * 1000);
                });
            });
        </script>
        <!-- 페이지 준비 완료 -->
        <script>
            $(document).ready(function () {
                app.run('#/form');
            });
        </script>
        <!-- form 템플릿 -->
        <script id="form" type="text/html">
            <form action="#/result" method="get">
                <label>Name</label>
                <input type="text" name="name" />
                <input type="submit" />
            </form>
        </script>
    </head>
    <body>
     
    </body>
    </html>
    cs


    script 태그에서의 type 속성이 text/template인 이유는 내부 글자를 자바스크립트에서 사용하려고 만들었는데 type속성을 입력하지 않으면 자바스크립트로 인식하고 실행해버리므로 template 속성을 지정해준것입니다.




    각자 #/form 과 #/result 으로 라우트하며 5초후 다시 메인페이지로 라우트하는 기능을 가지고 있습니다. 웹 페이지에서 템플릿 엔진을 사용하여 요청 매개변수를 라우트하는 방법에 대해서 알아보았습니다. 템플릿 엔진의 기능을 잘 활용하면 웹페이지 구성을 훨씬 멋있게 구성할수 있을것입니다. 다음에는 지금까지 배운것들을 활용하여  Sammy.js 라이브러리를 활용하여 트위터 검색 웹앱을 개발해보도록 하겠습니다~

    반응형

    댓글 0

Designed by Tistory.