效果图：

在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. Flink – Trigger，Evictor

    org.apache.flink.streaming.api.windowing.triggers;   Trigger public abstract class Trigger<T, W e ...

  2. 事务处理-回滚（转账操作）（转自http://www.cnblogs.com/void-m/p/6143540.html）

    JDBC事务处理-四大原则 原子性一致性隔离性持久性 第一步:实现转账操作 假设在账户中,盖伦有余额5000元,赵信有余额2000元, 盖伦要向赵信转账1000元. 1 2 3 4 5 6 7 8 9 ...

  3. java synchronized详解

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...

  4. vm网络设置

    设置NET模式 cat  /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE="eth0" BOOTPROTO="stati ...

  5. 点击链接跳转到固定div位置处（类似锚点链接）

    $('.joinbtn').click(function(){ var a = $("#contact").offset().top;$("html,body" ...

  6. DBA数据库：MySQL简述

    一. 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数 ...

  7. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

  8. 几种获取IP 根据IP获取地址的方法 JS，第三方 新浪 网易 腾讯

    第一种是利用纯真ip数据库,这个可以在网上找到很多,缺点是更新有点慢. 第二种是利用门户网站的接口 目前已知的有腾讯.新浪.网易.搜狐和Google提供IP地址查询API,但是找得到的只有腾讯.新浪和 ...

  9. java.util.ConcurrentModificationException --map

    key:3-key key:/v1.02-key Exception in thread "main" java.util.ConcurrentModificationExcept ...

  10. 总结运行SSIS包的几种方式

    方式一: 在BIDS里直接跑. 这个BIDS指的就是SQL Server Business Intelligence Development Studio,对于.net开发者来说它就是Visual S ...