<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>学习jqm</title>

    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">

</head>

<body>

    <div data-role="page" id="index" >

        <div data-role="header" data-position="fixed">

            <h1>列车时刻查询</h1>

        </div>

        <div data-role="main" class="ui-content">

            <form action="" >

                <div class="ui-field-contain">

                    <label for="">发车站</label>

                    <input id="station_begin" type="text">

                </div>

                <div class="ui-field-contain">

                    <label for="">到达站</label>

                    <input id="station_end" type="text">

                </div>

                <div class="ui-field-contain">

                    <label for="">车次</label>

                    <input id="train_code" type="text">

                </div>

                <div class="ui-field-contain">

                    <input id="btn_search" type="button" value="搜索">

                </div>

            </form>

            <ul id="list" data-role="listview" data-inset="true">

            </ul>

            <!--<a id="ajaxbtn" href="#" class="ui-btn">点击加载</a>-->

        </div>

        <div data-role="footer" data-position="fixed">

            <div data-role="navbar">

                <ul>

                    <li><a href="#"  data-icon="grid">查询</a></li>

                    <li><a href="#"  data-icon="star">收藏</a></li>

                    <li><a href="#"  data-icon="gear">设置</a></li>

                </ul>

            </div>

        </div>

    </div>

    <div data-role="page" id="detail" >

        <div data-role="header" data-position="fixed">

            <h1>列车时刻查询</h1>

        </div>

        <div data-role="main" class="ui-content">

            <h2></h2>

            <table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">

                <thead>

                    <tr>

                        <th>站名</th>

                        <th>到站时间</th>

                        <th>出发时间</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

            <a href="#index" class="ui-btn">返回</a>

        </div>

        <div data-role="footer" data-position="fixed">

            <div data-role="navbar">

                <ul>

                    <li><a href="#"  data-icon="grid">查询</a></li>

                    <li><a href="#"  data-icon="star">收藏</a></li>

                    <li><a href="#"  data-icon="gear">设置</a></li>

                </ul>

            </div>

        </div>

    </div>

    <script src="js/jquery-1.11.1.js"></script>

    <script src="js/jquery.mobile-1.4.3.js"></script>

    <script>

        var urlPre="http://proxy.e12e.com/?";

        var url1="http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=";

        var url2="http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=";

        var url3="http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=";

        //获取车次列表

        var getTrainList=function () {

            if($("#train_code").val() || $("#station_begin").val() && $("#station_end").val()){

                var searchButton=$(this);

                searchButton.button("option","disabled",true);

                $.mobile.loading("show");

                var _data={};

                var _url=url1;

                if(!$("#train_code").val()){

                    _data.StartStation=$("#station_begin").val();

                    _data.ArriveStation=$("#station_end").val();

                }else {

                    _data.TrainCode=$("#train_code").val();

                    _url=url2;

                }

                $.get(urlPre+_url,_data,function (data) {

                    var list=$("#list");

                    var timeTables=$(data).find("TimeTable");//TimeTable为xml的节点

                    var _arr=[];

                    timeTables.each(function (index,obj) {

                        var i=index;

                        if(i>10) return false;

                        var that=$(this);

                        if(that.find("FirstStation").text()=="数据没有被发现"){

                            alert("数据没有被发现!");

                            return false;

                        }

                        var _html='<li><a href="#" data-no="'+that.find("TrainCode").text()+'">'+

                                        '<h2>'+that.find("TrainCode").text()+'</h2>'+

                                        '<p>'+that.find("FirstStation").text()+'-'+that.find("LastStation").text()+'</p>'+

                                        '<p>用时:'+that.find("UseDate").text()+'</p>'+

                                        '<p class="ui-li-aside">'+that.find("StartTime").text()+'开</p>'+

                                        '</a></li>';

                        _arr.push(_html);

                    });

                    if(_arr.length>0){

                        list.html(_arr.join(""));

                        list.listview("refresh");

                    }

                    $.mobile.loading("hide");

                    searchButton.button("option","disabled",false);

                });

            }else {

                alert("请输入发车站、到达站或车次！");

            }

        };

        //获取某一车次的具体信息

        var isAjax=false;//是否正在执行ajax请求，此处表示不在拿数据

        var getInfoByTrainCode=function () {

            if(isAjax) return;//如果正在拿数据的话，就不执行，这样就可禁止在短时间里频繁点击

            isAjax=true;//表示现在开始拿数据了

            $.mobile.loading("show");

            var trainCode=$(this).attr("data-no");//车次值是保存在a的data-no属性里

            $.get(urlPre+url3,{TrainCode:trainCode},function (data) {

               $("#detail").find(".ui-content h2").first().html(trainCode+"次");

                var tbody=$("#detail").find(".ui-content tbody");

                tbody.html("");

                $(data).find("TrainDetailInfo").each(function (index,obj) {

                    var tr=$("<tr></tr>");

                    var that=$(this);

                    var _html='<td>'+that.find("TrainStation").text()+'</td>'+

                              '<td>'+that.find("ArriveTime").text()+'</td>'+

                              '<td>'+that.find("StartTime").text()+'</td>';

                    tr.html(_html);

                    tbody.append(tr);

                });

                $.mobile.loading("hide");

                isAjax=false;

                $.mobile.changePage("#detail");

            });

//            setTimeout(function () {

//                alert(1);

//                isAjax=false;//模拟3秒后,数据已取到，表示不在拿数据了

//            },3000);

        };

        var BindEvent=function () {

            $("#btn_search").on("click",getTrainList);

            $("#list").on("click","a",getInfoByTrainCode);

        };

        $(document).on("pageinit","#index",function () {

            var url="http://proxy.e12e.com/?http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByTrainCode?TrainCode=G1&UserID=";

            BindEvent();

//            $("#ajaxbtn").on("click",function () {

//               $.mobile.loading("show");

//               $.get(url,function (data) {

//                   console.log(data);

//                   $.mobile.loading("hide");

//               });

//           });

        });

//        $(document).on("pagebeforecreate",function () {

//            alert("pagebeforecreate");

//        });

//        $(document).on("pagecreate",function () {

//            alert("pagecreate");

//        });

//        $(document).on("pageinit",function () {

//            alert("pageint");

//        });

//        $(document).on("pagebeforehide","#index",function () {

//            alert("首页即将隐藏!")

//        });

//        $(document).on("pagehide","#index",function () {

//            alert("首页已隐藏!")

//        });

//        $(document).on("pagebeforeshow","#index1",function () {

//            alert("子页1即将显示!")

//        });

//        $(document).on("pageshow","#index1",function () {

//            alert("子页1已显示!")

//        });

    </script>

</body>

</html>

JQM---列车时刻查询的更多相关文章

  1. 列车时刻表查询 jqm/ajax/xml

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 我的Android进阶之旅------>关于调用Webservice查询火车票时刻表的几个接口介绍

    今天发现一个可以提供火车票时刻表查询的WebService,先记录下来以后如果写一个火车票时刻表查询的Android App的话就用的着.首先该WebService的的名字是TrainTimeWebS ...

  3. 出行服务类API调用的代码示例合集：长途汽车查询、车型大全、火车票查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 长途汽车查询:全国主要城市的长途汽车时刻查询,汽车站查询 车型大全 ...

  4. 查询执行成本高（查询访问表数据行数多）而导致实例 CPU 使用率高是 MySQL 非常常见的问题

    MySQL CPU 使用率高的原因和解决方法_产品性能_常见问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/knowledge_detail/51587.html ...

  5. Python 利用微信端口查看列车时刻表

    import requests """ 该程序查看列车时刻 """ url0 = 'http://www.webxml.com.cn/Web ...

  6. 假如我来架构12306网站---文章来自csdn（Jackxin Xu IT技术专栏）

    (一)概论 序言:  此文的撰写始于国庆期间,当中由于工作过于繁忙而不断终止撰写,最近在设计另一个电商平台时再次萌发了完善此文并且发布此文的想法,期望自己的绵薄之力能够给予各位同行一些火花,共同推进国 ...

  7. 火车时刻表WebApp

    关键词 :Ajax 跨域访问 php 同源策略 JQueryMobile 前言 在面试的过程中,兄弟连的徐老师提出要求我用JQuery Mobile(前端框架)来实现一个具有“火车时刻表”功能的Web ...

  8. 数据分析侠A的成长故事

    数据分析侠A的成长故事 面包君  同学A:22岁,男,大四准备实习,计算机专业,迷茫期 作为一个很普通的即将迈入职场的他来说,看到周边的同学都找了技术开发的岗位,顿觉自己很迷茫,因为自己不是那么喜欢钻 ...

  9. Android和Linux应用综合对比分析

    原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...

随机推荐

  1. 开源的运维机器人hubot原理

  2. eaby技术架构变迁

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 最近在infoq上面看到 ebay介绍其系统架构变迁以及系统设计分享方面的讲座,其中 ...

  3. WIN7-修改域名

    前言:访问本地项目有如下的几种方式,其中通过修改域名配置文件的方式使用的较少,不过在某些项目中也会使用的到(比如:我曾经参与的一个项目使用到SpringCloud框架,需要将每个微服务注册到,服务控制 ...

  4. java的向上转型总结

    在<think of java>中对'向上转型'有着如下的描述 看完之后很蒙圈,所以自己在网上找了一些描述,并自己做了简单的总结 简单的例子 class A{ public void A1 ...

  5. 浅谈Web缓存

    在前端开发中性能一直都是被大家所重视的一点,然后判断一个网站的性能最直观的就是看网页打开的速度. 其中提高网页反应的速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟, ...

  6. jQuery 学习笔记（函数调用机制）

    最近在学前端框架amazeui,之前用其中的CSS样式搭建了一个伪360网页,学会了点布局的东西,但是始终觉得有点无聊.所以这几天就开始研究jquery代码了. 对于我这样一个初学者来说,有很多东西都 ...

  7. 头像上传，拖拽，裁切 （非HTML5）版本

    演示地址: http://codeman35.itongyin.com:19002/v2/web_demo.html 功能: 支持滚轴放大缩小,鼠标拖动,裁切可视区域,裁切和图片处理都是后端操作.

  8. vs2012安装Microsoft.AspNet.WebApi.WebHost

    工具---库程序包管理器---程序包管理器控制台:输入下面命令:  Install-Package Microsoft.AspNet.WebApi.WebHost 

  9. VS2008下,aspx页面设计模式消失，只有黑白字体

    版权声明:本文为博主原创文章,未经博主允许不得转载. RT,在工具选项里面重新设定的时候,报错,说一部分文件无法安装. 寻找一晚上,终于有了解决方案,供以后参考. luanwey(大陆响尾蛇)(不做温 ...

  10. mybatis - resultMap

    resultMap有比较强大的自动映射,下面是摘自mybatis中文官网的的片段: 当自动映射查询结果时,MyBatis会获取sql返回的列名并在java类中查找相同名字的属性(忽略大小写). 这意味 ...