jQuery Mobile应用之火车票查询

时间：2022-04-27 17:50:23

效果图：

jQuery Mobile应用之火车票查询

在CMD中输入如下代码

corsproxy

（前提是有node.js环境，并先安装corsproxy）

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title></title>

        <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>

        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

    </head>

    <body>

        <div data-role="page" id="pageone">

            <div data-role="header" data-position="fixed">

                <h1>火车时刻表查询</h1>

            </div>

            <div data-role="fieldcontain">

                <label for="name">

                发车站

            </label>

                <input type="text" name="name" id="start" value="长沙" />

            </div>

            <div data-role="fieldcontain">

                <label for="name">

                终点站

            </label>

                <input type="text" name="name" id="end" value="北京" />

            </div>

            <div data-role="fieldcontain">

                <label for="name">

                车次

            </label>

                <input type="text" name="name" id="name" value="" />

            </div>

            <a href="#" id="search" data-role="button" data-transition="pop">查询</a>

            <ul id="result" data-role="listview" data-split-icon="gear"></ul>

            <div data-role="footer" data-position="fixed">

                <div data-role="navbar">

                    <ul>

                        <li>

                            <a href="#link" data-role="button" data-icon="search" data-iconpos="top">查询</a>

                        </li>

                        <li>

                            <a href="#link" data-role="button" data-icon="user" data-iconpos="top">我的</a>

                        </li>

                        <li>

                            <a href="#link" data-role="button" data-icon="video" data-iconpos="top">设置</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <script>

            $(document).on("tap", "#search", function() {

                var start = $("#start").val();

                var end = $("#end").val();

                var url = "http://localhost:1337/api.jisuapi.com/train/station2s?";

                var data = {

                    appkey: "c282f9956c5a3210",

                    start: start,

                    end: end

                };

                $.getJSON(url, data, function(j) {

                    console.log(j.result);

                    $(j.result).each(function() {

                        //                        console.log(":"+this.costtime);

                        var arrivaltime = this.arrivaltime;

                        var costtime = this.costtime;

                        var departuretime = this.departuretime;

                        var endstation = this.endstation;

                        var station = this.station;

                        var trainno = this.trainno;

                        $("#result").

                        append("<li id=\"to\"><h3><a>" + trainno + "</a></h3><p><strong>" + station + "--" + endstation + "</strong></p><p>用时：" + costtime + "</p><p class=\"ui-li-aside\"><strong>" + departuretime + "--" + arrivaltime + "</strong></p></li>").listview('refresh');

                    })

                });

            })

        </script>

        <script>

            $(document).on("click", "#to", function() {

                $.mobile.changePage("#pagetwo", 'pop');

            });

        </script>

        <!--

            作者：1984982452@qq.com

            时间：2016-07-11

            描述：第二页

        -->

        <div id="pagetwo" data-role="page" data-position="fixed">

            <div data-role="header" data-position="fixed">

                <a data-rel="back" data-transition="slide" data-role="button" data-icon="back" data-iconpos="notext">Search</a>

                <h1>XX车次</h1>

            </div>

            <div class="ui-grid-b">

                <div class="ui-block-a"><strong>站点</strong></div>

                <div class="ui-block-b"><strong>到点</strong></div>

                <div class="ui-block-c"><strong>开点</strong></div>

            </div>

            <div class="ui-grid-b">

                <div class="ui-block-a">北京南</div>

                <div class="ui-block-b">----</div>

                <div class="ui-block-c">08:00</div>

            </div>

        </div>+

    </body>

</html>

相关文章