效果图：

在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>

jQuery Mobile应用之火车票查询的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  3. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

  4. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  5. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

  6. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  7. jquery mobile 教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  8. jQuery Mobile高手必备的十大技巧和代码片段

    与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...

  9. jquery mobile 学习总结

    <!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

随机推荐

  1. 【转】一个新的UIButtonMessage 给NGUI，使用委托，自动选择Receiver提供的方法

    http://blog.csdn.net/chiuan/article/details/9290651?utm_source=tuicool&utm_medium=referral 来分享一个 ...

  2. PHP底层工作原理

    最近搭建服务器,突然感觉lamp之间到底是怎么工作的,或者是怎么联系起来?平时只是写程序,重来没有思考过他们之间的工作原理: PHP底层工作原理 图1 php结构 从图上可以看出,php从下到上是一个 ...

  3. Oracle merge into

    Oracle中Merge into用法总结 文件来源:(http://blog.csdn.net/yuzhic/article/details/1896878) 有一个表T,有两个字段a.b,我们想在 ...

  4. sed处理url编码解码=== web日志的url处理

    URL 编码/解码方法(linux  shell实现),方法如下: 1.编码的两种方法: admin@~ 11:14:29>echo '手机' | tr -d '\n' | xxd -plain ...

  5. Spring操作指南-针对JDBC配置声明式事务管理（基于注解）

  6. sql之连表查询--效率 通过分析各种连接查询的实现原理来了解

    1. 左连接 2.右连接 3.内连接 4.Cross join 笛卡尔乘积

  7. XMLtank测试记录

    1.首先就是这个分辨率对于高分屏的电脑适应太差了....立马让我有弃的想法..(如图) 2.游戏结束之后每次都要从第一关开始,很不方便.建议加入选关功能. 3.鼠标控制不方便,尤其是左键和右键分别控制 ...

  8. SQL 一条SQL语句 统计 各班总人数，男女各总人数 ，各自 男女 比例 （转）

    select  sClass 班级,count(*)  班级学生总人数, sum(case when sGender=0 then 1 else 0 end) 女生人数, sum(case when ...

  9. CLI:使用Go开发命令行应用

      原文地址 CLI或者"command line interface"是用户在命令行下交互的程序.由于通过将程序编译到一个静态文件中来减少依赖,一次Go特别适合开发CLI程序.如 ...

  10. Elasticsearch之client源码简要分析

    问题 让我们带着问题去学习,效率会更高 1  es集群只配置一个节点,client是否能够自动发现集群中的所有节点?是如何发现的? 2  es client如何做到负载均衡? 3  一个es node ...