一、項目目錄
二、HTML源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列車時刻表查詢</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/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 role="main" class="ui-content">
<div class="ui-field-contain">
<label>發車站:</label>
<input type="text" name="text-basic" id="search-begin" value="">
</div>
<div class="ui-field-contain">
<label>終點站:</label>
<input type="text" name="text-basic" id="search-end" value="">
</div>
<div class="ui-field-contain">
<label>車次:</label>
<input type="text" name="text-basic" id="search-no" value="">
</div>
<input type="button" value="搜索" id="search-submit">
<ul data-role="listview" data-inset="true" id="list">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid" class="ui-btn-active">查詢</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 role="main" class="ui-content">
<h2></h2>
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
<thead>
<tr>
<th data-priority="1">站名</th>
<th data-priority="persist">到站時間</th>
<th data-priority="persist">出發時間</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a href="#" class="ui-btn ui-corner-all" data-rel="back">返回</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid" class="ui-btn-active">查詢</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.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
var urlPre = "http://cors.itxti.net/?"; //跨域中轉
var url1 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=";
var url2 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=";
var url3 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=";
var isbind = 0;
//獲取車次列表
var getTrainList = function () {
//數據校驗
if ($("#search-no").val() || ($("#search-begin").val() && $("#search-end").val())) {
var searchButton = $(this);
searchButton.button("option", "disabled", true);
$.mobile.loading("show");
var _data = {};
var _url = url1;
if (!$("#search-no").val()) {
_data.StartStation = $("#search-begin").val();
_data.ArriveStation = $("#search-end").val();
} else {
_data.TrainCode = $("#search-no").val();
_url = url2;
}
$.get(urlPre + _url, _data,
function (data) {
$("#list").html("");
var list = $("#list");
var timeTables = $(data).find("TimeTable");
var _arr = [];
timeTables.each(function (index, obj) {
var i = index;
if (i > 10) return false; //只載入前10條
var that = $(this);
if (that.find("FirstStation").text() == "數據沒有被發現") {
alert("數據沒有被發現!");
return false;
}
_arr.push('<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>');
});
if (_arr.length > 0) {
list.html(_arr.join(""));
list.listview("refresh");
}
$.mobile.loading("hide");
searchButton.button("option", "disabled", false);
});
} else {
alert("請輸入發車站和終點站或輸入車次!");
}
};
var isAjax=false
//獲取詳情
var getInfoByTrainCode = function () {
$.mobile.loading("show");
var trainCode = $(this).attr("data-no");
if(isAjax) return;
isAjax=true
$.get(urlPre + url3,
{
TrainCode: trainCode
},
function (data) {
isAjax=false
$("#detail").find(".ui-content h2").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);
tr.html('<td>' + that.find("TrainStation").text() + '</td>' +
'<td>' + that.find("ArriveTime").text() + '</td>' +
'<td>' + that.find("StartTime").text() + '</td>');
tbody.append(tr);
});
$.mobile.loading("hide");
$.mobile.changePage("#detail");
});
};
三、項目完成後效果圖:
四、重要說明
文中用到的接口,是免費的公衆接口服務:TrainTimeWebService
地址:
http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx?
本項目要注意一個重要問題:在獲取列車信息時由於存在跨域問題,引起很多麻煩。以下地址是作爲跨域中轉的,可以有效解決跨域問題
var urlPre = “http://cors.itxti.net/?”; //跨域中轉
五、其它免費服務接口補充
天氣預報:
http://www.webxml.com.cn/WebServices/WeatherWebService.asmx
?
驗證碼:
http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx
?
電子郵件驗證:
http://www.webxml.com.cn/WebServices/ValidateEmailWebService.asmx
?
中英翻譯:
http://www.webxml.com.cn/WebServices/TranslatorWebService.asmx
?
火車時刻表:
http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx
?
股票行情:
http://www.webxml.com.cn/WebServices/ChinaStockWebService.asmx
?
電視節目預告:
http://www.webxml.com.cn/webservices/ChinaTVprogramWebService.asmx
?
騰訊QQ在線狀態查詢:
http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx
?
Ip地址查詢:
http://www.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx?op=getCountryCityByIp
?