<!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. 洛谷P3392 涂国旗

    P3392 涂国旗 107通过 507提交 题目提供者kkksc03 标签 难度普及- 提交  讨论  题解 最新讨论 直接读字符会wa WA?-- 为什么不对... 跪求找错 快点给钱 这不就是荷兰 ...

  2. LR12.53—第3课：重播Vuser脚本

    第3课:重播Vuser脚本 在前面的教训,你记录了一组典型的用户行为,并准备重播脚本. 重播脚本之前,您可以配置脚本的运行时设置,它定义了Vuser的行为. 注:记录与基于Web的协议的地方WebTo ...

  3. PSP个人项目耗时记录

    估计这个任务需要多少时间: 计划 估计用时 估计这个任务需要多少时间 500min 开发 450min 需求分析 120min 生成设计文档 20min 设计复审 30miin 代码规范 10min ...

  4. C#中如何定义全局变量及在各窗体中使用全局变量

    using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; us ...

  5. PVANET----Deep but Lightweight Neural Networks for Real-time Object Detection论文记录

    arxiv上放出的物体检测的文章,在Pascal voc数据集上排第二.源码也已放出(https://github.com/sanghoon/pva-faster-rcnn),又可以慢慢把玩了.这篇文 ...

  6. NHibernate系列文章二十五：NHibernate查询之Query Over查询（附程序下载）

    摘要 这一篇文章介绍在NHibernate 3.2里引入的Query Over查询,Query Over查询跟Criteria查询类似.首先创建IQueryOver对象,然后通过调用该对象的API函数 ...

  7. Maven的包依赖冲突可引发java.lang.IncompatibleClassChangeError错误

    新版API上线后,发现LOG文件没有正常输出.查看Tomcat的Log文件发现如下的错误信息 May , :: AM com.sun.xml.ws.server.sei.EndpointMethodH ...

  8. jmc远程监控java服务

    简介 JMC(Java mission control)是JDK自带的一个图形界面监控工具,监控信息非常全面.他的安装目录在%JAVA_HOME%\bin\jmc.exe 最近JSTORM程序在集群环 ...

  9. HP_UX HBA 卡信息收集脚本

    #/usr/bin/shname1=`hostname`_fcioscan -kfnNC fc |grep "/dev/" >/tmp/data/$name1.txtnum1 ...

  10. avalon2.2.3发布

    avalon2.2.3这次发布带许多好的东西 首先正式有了自己的LOGO 其次有了自己的QuickStart 样例工程, 这个工程整合了路由,表单,表格,切换卡等组件 https://github.c ...