<!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>