WebApp之JQuery Mobile实现火车列表信息查询

一、项目源代码如下:

>===>==>列车时刻表查询====>>终点站:==>>车次:==>===>==>=>=>=>>==>列车时刻表查询=>==>===>>=>=>=>=>=>>=>><script>var urlPre = “http://www.corsproxy.com/”; //Ajax的跨域中转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;{//数据校验if ($(“#search-no”).val() || ($(“#search-begin”).val() && $(“#search-end”).val())) {var searchButton = $(this); //获得搜索按钮searchButton.button(“option”, “disabled”, true); //将搜索按钮点击之后设置为不可用,,防止多次点击$.mobile.loading(_url = url1; _data.StartStation = $(“#search-begin”).val();_data.ArriveStation = $(“#search-end”).val();} else {_data.TrainCode = $(“#search-no”).val();_url = url2;}//发起get请求urlPre + _url$.get(“http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=”, _data,$(“#list”).html(“”);var list = $(“#list”);var timeTables = $(data).find(“TimeTable”); //找到xml数据中的项var _arr = []; //存放所有的车次timeTables.each(i = index;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>’ + 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(“请输入发车站和终点站或输入车次!”);}};getInfoByTrainCode = function () {$.mobile.loading(“show”);var trainCode = $(this).attr(“data-no”);if(isAjax) return;isAjax=true$.post(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(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”);});};{$(“#search-submit”).on(“click”, getTrainList);$(“#list”).on(“click”, “a”, getInfoByTrainCode); //为动态生成的list设置事件};$(document).on((isbind) returnisbind = 1;bindEvent();});>

其中包含JQuery Mobile的支持js和css

二、项目演示效果如下:

三、项目源代码下载:

这里写链接内容

有时不但是必要的,而且是很有必要的。

WebApp之JQuery Mobile实现火车列表信息查询

相关文章:

你感兴趣的文章:

标签云: