<!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. find命令和tar命令的使用

    tar命令 tar -zcvf small.tar.gz small(目录名) (压缩) tar -zxvf small.tar.gz -C small(目录名) (解压到指定目录) find 命令 ...

  2. C++设计模式-Memento备忘录模式

    Memento模式作用:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,这样以后就可将该对象恢复到原先保存的状态. UML图: Originator:负责创建一个备忘录Me ...

  3. variably modified 'dist' at file scope|

    转自:http://blog.csdn.net/wusuopubupt/article/details/18408227 错误原因: The reason for this warning is th ...

  4. Ambari 不能配置 Kafka 监听host的问题

    问题:Ambari下Kafka多IP监听配置 环境:Ambari 1.7.0 , Hadoop 2.2 Kafka 0.8.1.2.2.0.0 现象: Ambari 中是不能配置Kafka的host. ...

  5. 【小错误】SP2-0618: Cannot find the Session Identifier. Check PLUSTRACE role is enabled

    1.今天在scott用户下执行语句跟踪时报了如下错误: SCOTT@ORA11GR2>set autotrace on SP2: Cannot find the Session Identifi ...

  6. 13，SFDC 管理员篇 - 移动客户端

    1, 自定义导航 设置导航显示内容 Setup | Mobile Administration | Salesforce Navigation   1, 可以添加和删除在mobile中显示的内容   ...

  7. Linux压缩打包命令

    tar命令 [root@linux ~]# tar [-cxtzjvfpPN] 文件与目录 .... 参数 -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参数 ...

  8. （转）TortoiseGit(乌龟git)保存用户名密码的方法

    返回博客列表 转 TortoiseGit(乌龟git)保存用户名密码的方法 元谷 发布时间: 2014/05/03 23:07 阅读: 20529 收藏: 21 点赞: 12 评论: 3 window ...

  9. Oracle decode()函数应用

    在项目第一次遇到decode()函数,简单写一下用法. ')), ')), ')), ')), ')), ')), ')) from wg_jzmb jz, wg_jzfz fz where jz.s ...

  10. 简单的内网存活主机ip扫描

    @echo offset /a ti = 1:startif %ti% == 10 goto endping 192.168.1.%ti% -n 1 -w 20set /a ti = ti + 1go ...