본문 바로가기

web/JQTouch

jqtouch form post

다른 창으로 데이터를 넘겨 주는 방법을 보겠다. 당연히 post 방식이다.(get 방식도 가능합니다.)
- 물론  html 형식과 동일하게 form 방식을 넘겨줄수 있다.
- but html 형식으로 할경우 jqtouch에서 지원하는 애니메이션 효과는 나타나지 않는다.

!유의할 사항은 데이터를 받는 창에서의 작성형식이 많이 다르다는 것이다.
상위단에 jqtouch 경로등이 들어가지 않으며 <html> 태그로도 시작하지 않는다.
이는 jqtouch 자체 내에서 post/get 방식으로 데이터를 넘길시 자동적으로 페이지를 생성하기 때문이다.
(이것때문에 많이 헷갈렸습니다. 근데 사용하다보면 은근히 더 편합니다.)

먼저 form이 있는 첫번째 화면 소스입니다.



<%@ page contentType="text/html;charset=euc-kr" %>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR" />
     
        <title>post test</title>
         <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
        <script type="text/javascript" charset="euc-kr">
           var jQT = new $.jQTouch({
                icon: './img/logo.png',
                addGlossToIcon: false,
                startupScreen: './img/startimg.png',
                statusBar: 'black',
                preloadImages: [
                    'jqtouch/themes/jqt/img/back_button.png',
                    'jqtouch/themes/jqt/img/back_button_clicked.png',
                    'jqtouch/themes/jqt/img/button_clicked.png',
                    'jqtouch/themes/jqt/img/grayButton.png',
                    'jqtouch/themes/jqt/img/whiteButton.png',
                    'jqtouch/themes/jqt/img/loading.gif'
                    ]
            });  
</script>
<style>
</style>

</head>
<body>
 
 <div id="Menu">
  <div class="toolbar">
   <h1>post test</h1>
  </div> 
      
  <form action="formTest.jsp" method="POST" class="form" >
     
     <ul class="rounded">
       <li> <input type="text" name="param1"/></li>
       <li> <input type="password" name="param2"/></li>
    </ul>

     <a style="color:rgba(0,0,0,.9); width:50px;" class="submit whiteButton">전송</a>
     
  </form>

  </div>  
</body>
</html>




간단하게 input type 두개와 버튼으로 구성되어 있습니다.
 
받는 쪽의 페이지 소스입니다.
formTest.jsp


<%@ page contentType="text/html;charset=euc-kr" %>
<%
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
%>

<div>
    <div class="toolbar">
        <h1>formTest</h1>        
   
    </div>
      <ul class="rounded">
       <li> <input type="text" name="param1" value="<%=param1 %>"/></li>
       <li> <input type="password" name="param2" value="<%=param2 %>"/></li>
    </ul>
     <%=param1 %><br>
  <%=param2 %>
</div>



참간단합니다. 테그는 div로 시작하며 위의 상위단을 알려주는 toolbar 와 본문으로 나뉩니다.
본문엔 받은 파라미터를 출력하도록 변수를 두었습니다.
!! html 형식(<html>태그 및 기타 태그들) 및 라이블러리 설정은 필요치 않습니다.

1. 이제 원하는 문장을 input 박스에 넣고 전송 버튼을 눌러줍니다.


2. 두번째 페이지에서 전송된 문자열을 확인할수 있습니다.


- 전송 버튼은 <a> 링크 태그로 이루어져 있더군요. 흠..근데 css 어디에서 그려주는지를 모르겟습니다. 흠..찾고 싶은데..
- 두번째에서 다시 전송하면 form 만 넣어주면 됩니다.  



 

'web > JQTouch' 카테고리의 다른 글

jqtouch home 버튼 만들기  (0) 2011.05.31
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02