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>

转载于:https://www.cnblogs.com/beast-king/p/6213946.html

JQM---列车时刻查询相关推荐

最新全国火车列车时刻查询数据库20090309下载
附件为最新全国火车列车时刻查询数据库表,可以导入到SQL. 原本也是从网上下载下来的,后来发现有很多重复的,错站的,我在本地做了大量手动插入修改等,花了我很长时间哦.深感网上很难找,所以拿出来和大家分 ...
列车时刻查询系统Java-Eclipse（GUI编程）
列车时刻查询系统,就是利用Java和数据库编程实现,具有列车信息的录入.查询.删除.修改.输出.还有系统界面的设计等等.列车时刻查询系统主要功能是:通过列车时刻查询系统,管理人员可以对车站设置.列 ...
由列车时刻查询系统想到的...
由于C#结课,项目设计<列车时刻查询>,看似简单,实际上他的设计是个大热点! 我想火车站的售票系统也是基于这个问题上的 ,当然依照我的能力,设计查询也是部分城市的功能,不可能像全国这么大的 ...
C++列车时刻查询开发进度记录
6月26日打了一天=-=比较累,加入了功能,display可以用了并且有了高大上的名字:车站信息管理.时间调度功能也分为了三个功能,给指定车次加车站,给指定车次安排时间,给指定车次减车站.加了几个s ...
列车时刻管理c语言程序设计,列车时刻管理系统C语言程序设计(源代码).pdf
一.问题分析随着社会的不断发展,人们在交通方式的选择上有了不同以往的选择,以前的靠人力, 畜力,以及摩托车,现在人们的选择更多的会放在了汽车,飞机还有列车上.每当春节前后时,都有一批民工潮,学生潮 ...
列车时刻管理c语言程序设计,列车时刻管理系统C语言程序设计(源代码).doc
列车时刻管理系统C语言程序设计(源代码) 问题分析随着社会的不断发展,人们在交通方式的选择上有了不同以往的选择,以前的靠人力,畜力,以及摩托车,现在人们的选择更多的会放在了汽车,飞机还有列车上.每当 ...
列车时刻管理c语言程序设计,列车时刻管理系统C语言程序设计(源代码)（22页）-原创力文档...
问题分析随着社会的不断发展,人们在交通方式的选择上有了不同以往的选择,以前的靠人力,畜力,以及摩托车,现在人们的选择更多的会放在了汽车,飞机还有列车上.每当春节前后时, 都有一批民工潮,学生潮,这 ...
Android航班时刻查询
http://www.chenwg.com/technology/android/59-flight-search.html 在网上发现一个接口,是关于航班查询的,http://webservice. ...
能时刻查询火车是否晚点的网站
能时刻查询火车是否晚点的网站: http://www.ht1881.com/

JQM---列车时刻查询

JQM---列车时刻查询相关推荐

最新文章

热门文章