<!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. APP开发和web开发的区别

    1.web开发: 1.浏览器直接访问,协议是http,基本都是PC访问,也就是在家和办公场合,网络比较好. 2.web如果多个服务集成的话使用的是ESB来统一集成 2.APP开发 1.手机app客户端 ...

  2. linux 进程的创建

    1. 进程号: 每个进程在被初始化的时候,系统都会为其分配一个唯一标识的进程id,称为进程号: 进程号的类型为pid_t,通过getpid()和getppid()可以获取当前进程号和当前进程的父进程的 ...

  3. android-----test------模拟来电提醒和短信提醒

    为了测试应用是否能处理来电提醒和短信提醒时正常处理,我们需要做个测试,怎么模拟来电提醒和短信提醒呢?? 采用Telnet 命令来模拟. 1.首先看看Telnet 命令是否可以使用,如果不可以使用,则需 ...

  4. C# 软件绑定QQ群类开源放出

    周天闲来无事写个公共类,可以添加到你们自己项目中限制必须加入你QQ群才可以使用. 代码简单,高手勿喷,有哪里不合理的请回帖让大家学习学习. using System; using System.Tex ...

  5. 安装zabbix报错configure: error: libcurl library not found

    libcurl 和libcurl-devel都已经安装 且大于7.13.1 但还是报错,这时需要在configure 指定curl路径即可 ./configure --prefix=/usr/loca ...

  6. jsp中两种include的区别【转】

    引用文章:http://www.ibm.com/developerworks/cn/java/j-jsp04293/ http://www.cnblogs.com/lazycoding/archive ...

  7. 最近学习linux命令的一个总结

    最近学习了unix power tools,一方面是想增加对unix系统的了解:另一方面也是想增进使用效率,因为unix一大特色就是内置工具的丰富性.有了这些工具,可以方便的查看系统信息,查找需要的文 ...

  8. springboot 使用c3p0数据库连接池的方法

    使用springboot开发时,默认使用内置的tomcat数据库连接池,经常碰到这种情况:运行时间一长,数据库连接中断了.所以使用c3p0连接池吧. 引入的maven依赖: <dependenc ...

  9. windows下的php rabbit mq安装、配置

    http://www.cnblogs.com/shanyou/p/4067250.html 这篇博文写的rabbit mq和erlang的安装以及rabbitmq可视化插件的一些操作 接下去开始安装P ...

  10. 我个人结合到老师的来理解的——Asp.net Webform的页面生命周期

    1.分析请求的资源路径,寻找目录中对应的资源文件,若无法找到资源文件,则返回404错误2.分析资源文件的Page命令,通过Page指令找到代码文件和类 3.将页面文件和类一起编译生成最终的类(仅仅在第 ...