<!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. .net MVC3 页面和 action 传值问题

    一.ViewData ViewData ViewBag 的特点和使用场景比较 1.  TempData:类型是字典的键值对结构 特点:值只能取一次.保存在Session中,Controller每次执行 ...

  2. VisualStudio2010正则表达式查找和替换

    把 TRACE(_T("something etc."); 替换为 TRACE(_T("something etc."));查找内容:表达式:TRACE\(_T ...

  3. web.xml

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" ...

  4. IOS 判断耳机插入/拔出

    一. 方式 1.注册监听 //注册监听耳机设备的插入/拔出 AudioSessionAddPropertyListener (kAudioSessionProperty_AudioRouteChang ...

  5. python 2.7 rsa 离线安装 和使用示例

    离线安装方法 http://blog.csdn.net/monsion/article/details/8679847 >>> import rsa >>> (pk ...

  6. Linux内核模块设计

    内核的设计有两种方式:单内核和微内核,两者各有优劣,关于两者的比较可以参见wiki．windowds和Solaris采用微内核结构． Linux内核采用单内核结构,设计比较简单,但单内核的理念是把所有 ...

  7. 同一服务器上多个版本的 sqlserver　，如何连接，改变某一实例的端口号

    1. SQL Server配置管理器,双击“TCP/IP” 2. TCP/IP设置 确定后重启SQL Server服务,打开SQL Server Management Studio,服务器名称输入12 ...

  8. onethink上传图片（资源）和预览

    直接上干货 不废话了 普通上传:  onthink框架 后台已经有图片和文件上传功能 controller里只需: public function addPicture(){ /* 调用文件上传组件上 ...

  9. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  10. Kubernetes集群初探

    上文我们在一台虚机上演示了Kubernetes基于redis和docker的guestbook留言簿案例,本文我们将通过配置Kubernetes集群的方式继续深入研究.集群组件安装如下配置. IP N ...