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>

 

posted @ 2016-07-12 19:00  春风自是人间客  阅读(321)  评论(0)  编辑  收藏  举报