1

私は現在、jQueryMobileへの最初の一歩を踏み出そうとしています。だから私は電車の時刻表用のアプリを開発しています。複雑すぎることはありません。

出発、到着、時間などに関する情報を入力します。クエリのURLは次のようになります。クエリの 例ここで、 http://poucaterra.joaodias.me/app/index.html
のアプリインデックスにアクセスすると、

(たとえば、アプリに同じ値を入力してみてください。出発には「coimbra」、到着には「aveiro」、日付には「2012-08-25」、時間には20を入力してください)

表示結果は「未定義」と書かれた空白のページです。

では、返されたJSON値を渡し、それらを読み取ってリストビューのある別のページに送信し、検索結果を表示するための最良の方法は何ですか?

質問が多すぎない場合は、現在のコードで例を示してください。私はこれで赤ちゃんの一歩を踏み出しているので、私はすでに他のコードを読み通そうとしましたが、どこに、いつ、どのように...ため息をつくのかわからないようです私はそのような初心者ですこれで!ありがとう :)

ああ、ほとんど忘れてしまった。HTMLコードは次のとおりです。

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="pt"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="pt"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="pt"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Pouca Terra</title>
        <meta name="description" content="Pouca Terra - Train timetables">
        <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

        <!-- Apple Start Icon -->
            <link rel="shortcut icon" href="favicon.ico">
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
            <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>
            <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-ipad.png" />
            <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-iphone4.png" />
            <link rel="apple-touch-startup-image" href="apple-touch-startup-image.png" />

        <!-- CSS -->
            <link rel="stylesheet" href="assets/css/jquery.mobile-1.1.1.min.css" />
            <link rel="stylesheet" type="text/css" href="assets/css/themes/poucaTerra.css"/>



        <!-- Javascript -->
        <script src="assets/js/lib/modernizr-2.5.3.min.js"></script>

    </head>

    <body>
<!--
****************************************************
***************** PAGE: 1 - SEARCH FORM PAGE *************  
****************************************************
-->
            <div data-role="page" id="search">
                <!-- HEADER TOP BAR -->
                    <div data-theme="a" data-role="header" data-position="fixed">
                        <h4>Pouca Terra</h4>
                    </div>
                <!-- END HEADER TOP BAR -->

                <!-- CONTENT FORM -->
                    <div data-role="content" style="padding: 15px">
                        <form id="search-form" action="cp/getdata.php?" method="get">
                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <label for="textinput1">
                                            Departure
                                        </label>
                                        <input name="departure" id="textinput1" placeholder="Estação de Origem" value="" type="text" />
                                    </fieldset>
                                </div>

                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <label for="textinput2">
                                            Arrival
                                        </label>
                                        <input name="arrival" id="textinput2" placeholder="Estação de Destino" value="" type="text" />
                                    </fieldset>
                                </div>

                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                    <label for="textinput3">
                                            Date
                                        </label>
                                        <input name="day" id="textinput3" placeholder="Formato: aaaa-mm-dd" value="" type="date" />
                                    </fieldset>
                                </div>

                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <label for="slider1">
                                            Hour
                                        </label>
                                        <input type="range" name="hour" id="slider1" value="hour" min="0" max="24" data-highlight="true" data-track-theme="b" />
                                    </fieldset>
                                </div>

                                <input type="submit" value="Submit" />
                        </form>
                    </div>
                <!-- END CONTENT FORM -->

            </div>
<!-- ***************** PAGE: 1 - END SEARCH FORM PAGE ************* -->


<!--
****************************************************
***************** PAGE: 2 - RESULTS TRAIN TIMETABLES *************  
****************************************************
-->
            <div data-role="page" id="results">

                <!-- HEADER TOP BAR -->
                    <div data-theme="d" data-role="header">
                        <h4>Resultados</h4>
                    </div>
                <!-- END HEADER TOP BAR -->

                <!-- CONTENT FORM -->
                    <div data-role="content" style="padding: 15px">
                        <ul data-role="listview" data-theme="c" data-dividertheme="d" data-counttheme="e">  

                        </ul>  
                    </div>
                <!-- END CONTENT FORM -->

            </div>
<!-- ***************** PAGE: 2- END RESULTS TRAIN TIMETABLES ************* -->

        <!-- *** Javascript at the bottom (for performance purposes) *** -->
            <!-- Add to Home -->
                <script type="text/javascript">
                    if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
                        var addToHomeConfig = {
                            animationIn:'bubble',       // Animation In
                            animationOut:'drop',        // Animation Out
                            lifespan:30000,             // The popup lives 30 seconds
                            expire:2,                   // The popup is shown only once every 2 minutes
                            touchIcon:true,
                            message:''
                        };
                        document.write('<link rel="stylesheet" href="assets/css/add2home.css">');
                        document.write('<script type="application/javascript" src="assets/js/lib/add2home.js"><\/s' + 'cript>');
                    }
                </script>

            <!--jquery-->
                <script type="text/javascript" src="assets/js/lib/jquery-1.8.min.js"></script>

            <!--jquery mobile-->                    
                <script type="text/javascript" src="assets/js/lib/jquery-1.8.min.js"></script>
                <script src="assets/js/lib/jquery.mobile-1.1.1.min.js"></script>

            <!--bootstrap datepicker-->
                <script type="text/javascript" src="assets/js/lib/bootstrap-datepicker.js"></script>

            <!-- Application Javascript -->
                <script type="text/javascript" src="assets/js/pages/index.js"></script>
    </body>
</html>
4

1 に答える 1

0

最初のページ (フォームのあるページ) でクエリを実行するか、2 番目のページ (結果を含むリストビューのあるページ) でクエリを実行しますか?

どちらでも機能しますが、ここに私のアドバイスがあります。それは、「実際の」ページについて話しているのか、JS によって生成されたページについて話しているのかによって異なります。

従来のページベースの Web 開発では、基本的なパターンは次のとおりです。

  1. ページ #1 でクエリを作成する
  2. GET 文字列 (例: " ?foo=bar") または POST データ (つまり、フォームのフィールドにクエリ情報が保持されているフォームの送信) を使用して送信します。
  3. サーバーはクエリ結果を含むページ #2​​ を返します

ページ #1 からページ #2​​ にクエリを渡し (GET 文字列または Cookie を介して、またはその間にクエリをサーバーに渡す)、ページ #2​​ に AJAX を介してクエリを作成させることができます ...しかしとにかくページ #2​​ を取得する必要があるため、そのリクエストでクエリを送信することは理にかなっています。

ただし、モバイル開発では、多くの場合、「ページ」は新しい URL への移動をまったく必要としません。代わりに、DOM 操作を使用して「ページ」を変更します (例: 「$('#oldPage').remove(); $(body).append(newPage);」)。この場合、通常は AJAX 呼び出しを介してクエリを作成します。実際のページ遷移がないため、「クエリを渡す」ことは、ある関数から次の関数に JS 変数を渡すのと同じくらい簡単です。

このスタイルでは、多くの場合、「ページ #2​​」のコードで実際の AJAX リクエストを作成するのが理にかなっています。

それが役に立てば幸いですが、質問に完全に答えていない可能性があるので、質問があればコメントしてください。

于 2012-08-24T00:23:56.100 に答える