-
[HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리프로그래밍/HTML5 Web 2016. 7. 10. 18:15반응형
Sammy.js 라이브러리를 사용하면 요청 매개변수를 처리할수 있는데 여기서 말하는 요청 매개변수는 입력양식을 뜻하는것입니다.
Sammy.js 라이브러리를 사용하면 웹 페이지 입력양식과 같은 데이터 요청을 모두 처리할수 있습니다.
아래 코드는 글자를 입력하면 그 글자를 HTML 상으로 띄워주고 5초후에 다시 메인페이지로 돌아가는 기능을 가진 코드입니다.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!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 Requestvar name = this.params['name'];//Show$('body').empty();$('<h1></h1>').text(name).appendTo('body');//After 5SecondssetTimeout(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 라이브러리를 활용하여 트위터 검색 웹앱을 개발해보도록 하겠습니다~
반응형'프로그래밍 > HTML5 Web' 카테고리의 다른 글
[HTML5] 웹워커 Web Worker 기초 상식과 개요 (0) 2016.07.13 [HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드 (0) 2016.07.11 [HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트 (0) 2016.07.10 [HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method (0) 2016.07.10 [HTML5] 기본 기능과 벤더 프리픽스 제거 (0) 2016.07.09
