JQM---列车时刻查询
<!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---列车时刻查询的更多相关文章
- 列车时刻表查询 jqm/ajax/xml
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 我的Android进阶之旅------>关于调用Webservice查询火车票时刻表的几个接口介绍
今天发现一个可以提供火车票时刻表查询的WebService,先记录下来以后如果写一个火车票时刻表查询的Android App的话就用的着.首先该WebService的的名字是TrainTimeWebS ...
- 出行服务类API调用的代码示例合集：长途汽车查询、车型大全、火车票查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 长途汽车查询:全国主要城市的长途汽车时刻查询,汽车站查询 车型大全 ...
- 查询执行成本高（查询访问表数据行数多）而导致实例 CPU 使用率高是 MySQL 非常常见的问题
MySQL CPU 使用率高的原因和解决方法_产品性能_常见问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/knowledge_detail/51587.html ...
- Python 利用微信端口查看列车时刻表
import requests """ 该程序查看列车时刻 """ url0 = 'http://www.webxml.com.cn/Web ...
- 假如我来架构12306网站---文章来自csdn（Jackxin Xu IT技术专栏）
(一)概论 序言: 此文的撰写始于国庆期间,当中由于工作过于繁忙而不断终止撰写,最近在设计另一个电商平台时再次萌发了完善此文并且发布此文的想法,期望自己的绵薄之力能够给予各位同行一些火花,共同推进国 ...
- 火车时刻表WebApp
关键词 :Ajax 跨域访问 php 同源策略 JQueryMobile 前言 在面试的过程中,兄弟连的徐老师提出要求我用JQuery Mobile(前端框架)来实现一个具有“火车时刻表”功能的Web ...
- 数据分析侠A的成长故事
数据分析侠A的成长故事 面包君 同学A:22岁,男,大四准备实习,计算机专业,迷茫期 作为一个很普通的即将迈入职场的他来说,看到周边的同学都找了技术开发的岗位,顿觉自己很迷茫,因为自己不是那么喜欢钻 ...
- Android和Linux应用综合对比分析
原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...
随机推荐
- Struts2：国际化
链接:[Java:国际化] src下有国际化资源文件:lan.propertieslan_zh_CN.properties 中文系统系统默认使用zh_CN文件,没有的话使用基本文件lan.proper ...
- oracle 查询执行过的SQL语句
SELECT * FROM v$sqlarea t WHERE t.FIRST_LOAD_TIME between '2016-12-23/16:03:00' and '2016-12-23/16:0 ...
- HTML5移动端图片上传模块
上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...
- strcpy和memcpy的区别（转载）
strcpy和memcpy都是标准C库函数,它们有下面的特点.strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符. 已知strcpy函 ...
- Windows Azure初体验
目前在IT界,云这个概念的第一意思不再是词典里的解释了.不过它们还是有相同点的——也许确实会酝酿出一块大蛋糕,可也是飘在天上,众神分食之,与我等P民无关.所谓云,不过是网络时代发展到一定阶段的必然产物 ...
- 代码管理——如何连接Git Server，下载代码
最近一个项目需要与国外团队合作,而他们的代码在GitLab上,需要使用Git工具连接服务器,对于我这样一个SVN的拥护者,当然很高兴去接受这个工作了(鄙视一下目前单位还使用ClearCase). 但操 ...
- JavaScript中的分支结构
说到JavaScript中的分支结构,我们就不得不提到流程控制这个词,我们所有的程序都是由数据和算法组成的.程序=数据+算法通常我们所说的算法都可以通过"顺序","分支& ...
- android开发--sqlite数据库
一.SQLite简介 Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大.SQLite具备下列特点: 1.轻量级 使用 SQL ...
- 采用UDP协议的PIC32MZ ethernet bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 经过千辛万苦,今天终于 ...
- xampp windows版本安装后无法使用大文件下载的解决办法
找到httpd.conf 在<Directory "C:/xampp/htdocs"> </Directory>添加EnableSendfile On