列车时刻表查询 jqm/ajax/xml

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liechebiao.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<style>
#btn{background-color:rgba(255,255,255,0.3);color:#ccc;}
#back{display:block;margin:0 auto;}
</style>
<script>
var url1 = "http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=";//通过发车站和终点站查询
var url2 = "http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=";//通过车次来查询
var url3 = "http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=";
//请求加载详情：
var isAjax=false; //ajax使用小技巧
function city(Id){
$.mobile.loading("show"); //加载图标显示出来
if(isAjax) return; //如果为true，则正在加载，再点击多次都不会执行。
isAjax=true; //开始之前设为true
$.ajax({
type:'get',
url:url3,
data:{TrainCode:$("#num"+Id).text()},
timeout:30000,
success:function(data){
isAjax=false; //加载成功后设为false，此时又开始加载了
var info=$(data).find("TrainDetailInfo");
var trip="";
for(var i in info){ //解析xml文件
trip+='<tr><td>'+$(info).eq(i).find("TrainStation").text()+'</td><td>'+$(info).eq(i).find("StartTime").text()+'</td><td>'+$(info).eq(i).find("ArriveTime").text()+'</td></tr>'
$("#table").find("tbody").empty().append(trip);

}
$.mobile.changePage("#index1"); //跳转到下一个页面
$.mobile.loading("hide"); //加载的图标隐藏起来

}
});

}

$(document).on("pageinit","#index",function(){//页面初始化之后
$("#search_btn").on("click",function(){ //发送请求之前先校验
if($("#start").val()&&$("#end").val()||$("#num").val()){
var btn=$(this);
btn.button("option","disable",true);//设置搜索按钮不可再次点击
$.mobile.loading("show"); //设置加载图标显示
var url=url2 //默认url为url2，先判断再发送请求
var data={};
if($("#num").val()){ //如果填了车此次信息，就加在url2，
var data={TrainCode:$("#num").val()};
}
else{ //如果没填了车此次信息，就加在url1
var url=url1
var data={StartStation:$("#start").val(),ArriveStation:$("#end").val()};
}
$.ajax({
url:url,
type:'get',
data:data,
success:function(data){

var timeTables = $(data).find("TimeTable");
var detail="";
for(var i=0;i<timeTables.length;i++){
if(i>10) //第10条信息后面的就不要了
return false;

if(timeTables.find("FirstStation").text()=="数据没有被发现"){
alert("数据没有被发现");
return false;
}

detail+='<li><a href="###" onclick="city('+i+')" ).text()+'</span></li>';

$("#list").html(detail);
$("#list").listview("refresh");
$.mobile.loading("hide");
btn.button("option","disable",false);
}
}
});

}else{
alert("请输入出发站和终点站或者输入车次！");
}
});

});
</script>
</head>
<body>
<div data-role="page" >设置</a></li>
</ul>
</div>
</div>
</div>

列车时刻表查询 jqm/ajax/xml

相关推荐