效果图：

在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. mysql导入大文件sql

    备份mysqldump mysqldump -u root -p ao2012 > /mnt/www/zq_ao2012/backup.sql 然后数据库密码 导入 mysql -h local ...

  2. ArcGIS Server，rest路径输入要素json 格式描述

    以下内容只测试了简单线, 在ArcGIS Server 的rest路径下可以对服务进行操作,如Query等,这些操作可以输入json 格式要素描述或运行得到即输出json格式要素描述. 如博客:htt ...

  3. UISprite(NGUI)扩展 图片镂空

    NGUI 版本2.6.3 在做新手引导时,需要高亮特定UI元素,也就是加个黑色蒙板,然后在蒙版上显示这个UI元素,为了简单方便我扩展了下UISprite,来镂空指定空间. 分为2种,矩形和圆镂空,矩形 ...

  4. @Html.Raw（）

    在用VS 2015写代码时,匹配邮箱的正则表达式 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/​ @报错  主要因为 @是MVC里的关键字,所以不能直 ...

  5. CMake的一些使用

    1. 使用QT加载CMake工程 打开QT,"文件"->"打开文件或项目"->选中CMakeLists.txt文件,出现对话框,单击下一步,点击&q ...

  6. CS193P - 2016年秋 第三讲 Swift 语言及 Foundation 框架

    这一讲介绍一些 Swift 的重点概念.特别是一些有别于其它语言的地方.但本质上还都是语法糖. 想充分理解这一讲的内容,最好的方式就是 打开 playgound,亲自动手来实验. 1,Optional ...

  7. 详解一个自己原创的正则匹配IP的表达式

    这里给大家详细讲解一下一个匹配IP地址的正则表达式, 有关正则方面的知识,会在详细的讲解中提到. 在讲解之前,我先给大家介绍一下,ip地址的生成规则. IP地址,是由32位数字二进制转为四个十进制的字 ...

  8. Testlink与Redmine关联

    TestLink是一个开源的测试管理工具,它可以有效地管理整个测试流程(测试需求, 测试计划, 测试用例, 测试执行, 测试结果分析),但不能和开发流程统一起来,从而不能及时参与到开发中去,不能使项目 ...

  9. Linux 设置定时任务crontab命令

    1.  crontab命令概念 crontab命令用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行. cron 系统调度进程. 可以使 ...

  10. 汽车ABS系统-第一周作业

    ABS系统也成防抱死系统(Anti-lock Braking System),由罗伯特·博世有限公司所开发的一种在摩托车和汽车中使用,它会根据各车轮角速度信号,计算得到车速.车轮角减速度.车轮滑移率: ...