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 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...
随机推荐
- <select> 标签使用
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- 剑指Offer:面试题31——连续子数组的最大和(java实现)
问题描述 : 输入一个整数数组,数组里面有正数也有负数.数组中一个或连续几个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n) 思路1:常规解法,不知道怎么描述了.. 代码: bo ...
- 十一、Manipulators
1. Manipulators是可以用三维进行绘制的的节点,可以将用户行为值化,对其他节点的属性进行modify. 2. 属性值可以通过Channel Box 和Graph Editor进行修改.同其 ...
- XML Schema命名空间解析
URI Web中汇集了各种资源.资源可以是具有标识的任何事物, 如文档. 文件. 菜单项. 计算机. 服务等, 甚至可以包括人. 组织和概念［BernersLee 1998］.在Web体系结构中, ...
- .vimrc vim 配置大全
map <F9> :call SaveInputData()<CR>func! SaveInputData() exec "tabnew" exec 'no ...
- linux mysql远程连接
今天在本地连接linux服务端的mysql始终报错61,谷歌后找到原因: linux的mysql默认是不允许远程连接操作的,在stack上面找到方法:修改mysql配置文件/usr/local/mys ...
- html&css基础知识
***定义字符编码:一般为UTF-8(年国际通用编码) ***响应式界面:可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,可以兼容多个终端. 在websto ...
- python模块之configparser
configparser用于处理特定格式的文件,其本质上是利用open来操作文件. # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2:v2 # 值 [section ...
- PAT 02-线性结构1 两个有序链表序列的合并 (15分)
本题要求实现一个函数,将两个链表表示的递增整数序列合并为一个递增的整数序列. 函数接口定义: List Merge( List L1, List L2 ); 其中List结构定义如下: typedef ...
- IP地址划分
对于32位的IPV4地址来说,有5中IP地址类型 A类IP地址第一个字节是网络地址,后三个字节是主机地址,且最高位以0开头. 0000001 00000000 00000000 00000001 ...