效果图：

在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. x86架构手机跑安卓好吗？(脑补)

    华硕低价位手机ZenFone一推出就掀起市场话题,许多人也对ZenFone所采用的Intel Atom处理器有所意见,深怕其相容性问题无法正确执行应用程式App,这究竟是怎么回事呢? Intel近几年 ...

  2. HTTP参数中Etag的重要性

    在研究tornado时,有个Etag比较好奇,从网上查询摘录如下:

  3. 转 Netflix OSS、Spring Cloud还是Kubernetes? 都要吧！

    Netflix OSS.Spring Cloud还是Kubernetes? 都要吧! http://www.infoq.com/cn/articles/netflix-oss-spring-cloud ...

  4. Java中Map常用方法总结以及遍历方式的汇总

    一.整理: 看到array,就要想到角标. 看到link,就要想到first,last. 看到hash,就要想到hashCode,equals. 看到tree,就要想到两个接口.Comparable, ...

  5. Linux从零单排（一）：Google Chrome的安装

    刚刚安装了Linux ubuntu16.10系统,先装上我一直习惯用的Google Chrome 安装步骤如下: 1.终端输入 sudo wget https://repo.fdzh.org/chro ...

  6. System.Data.SqlClient.SqlException: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。 (provider: SQL Network Interfaces, error: 26 - 定位指定的服务器/实例时出错)

    A network-related or instance-specific error occurred while establishing a connection to SQL Server. ...

  7. Error:java:Compilation failed: internal java compiler error

    在IDEA中编译时出现这个错误:Error:java:Compilation failed: internal java compiler error! Information:Using javac ...

  8. JAVASE02-Unit03： 日期操作 、 集合框架

    Unit03: 日期操作 . 集合框架 java.util.Date package day03; import java.util.Date; /** * java.util.Date * Date ...

  9. QT 调试时出现 During startup program exited with code 0xc0000135 错误

    我用的QT creator 5.70 出现上述原因是动态库加载不成功,但是QTcreator 不会提示什么动态库,具体缺乏什么动态库要用VS新建一个工程调用才可以看到,这也是QT Creator很大的 ...

  10. tomcat 格式化输出到kafka

    cat /data/tomcat/conf/server.xml <Valve className="org.apache.catalina.valves.AccessLogValve ...