<!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+')" id="num'+i+'">'+$(timeTables).eq(i).find("TrainCode").text()+'</a><span>'+$(timeTables).eq(i).find("StartStation").text()+'--</span><span>'+$(timeTables).eq(i).find("ArriveStation").text()+'</span><br><span>'+$(timeTables).eq(i).find("StartTime").text()+'--</span><span>'+$(timeTables).eq(i).find("ArriveTime").text()+'</span><br><span>用时：'+$(timeTables).eq(i).find("UseDate").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" id="index">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main" class="ui-content">
<form action="###" methor="post" id="car_form">
<div class="ui-field-contain">
<label for="start">出发站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>
<input type="submit" value="搜索" id="search_btn">
<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="#index1" data-icon="grid" class="ui-btn-active">查询</a></li>
<li><a href="javascript:void(0)" data-icon="star">收藏</a></li>
<li><a href="javascript:void(0)" data-icon="gear">设置</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="index1">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main" class="ui-icon">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke" id="table">
<thead>
<tr>
<th>站点</th>
<th>到站时间</th>
<th>出发时间</th>
</tr>
</thead>
<tbody></tbody>
</table>

</div>
<div data-role="footer" data-position="fixed">
<a href="#" class="ui-btn ui-corner-all" data-rel="back" id="back">返回</a>
</div>
</div>
</body>
</html>

列车时刻表查询 jqm/ajax/xml的更多相关文章

  1. 练习题（登陆-进度条-微信接口判断qq-微信接口判断列车时刻表-）

    1.写一个用户的登陆注册的界面,用户的密码用hashlib加密存在文件中,登陆时候,用户的密码要和文件中的密码一致才行 def sha(password): #加密函数 passwd = hashli ...

  2. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 2 -使用XQuery 查询XML数据

    XQuery 是一个浏览/返回XML实例的标准语言. 它比老的只能简单处理节点的XPath表达式更丰富. 你可以同XPath一样使用.或是遍历所有节点,塑造XML实例的返回等. 作为一个查询语言, 你 ...

  3. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 1 -使用FOR XML返回XML结果集

    XML 介绍 <CustomersOrders> <Customer custid="1" companyname="Customer NRZBB&qu ...

  4. SQL SERVER中XML查询：FOR XML指定PATH

    SQL SERVER中XML查询:FOR XML指定PATH 前言 在SQL SERVER中,XML查询能够指定RAW,AUTO,EXPLICIT,PATH.本文用一些实例介绍SQL SERVER中指 ...

  5. AJAX XML 实例

    AJAX XML 实例 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息 <!DOCTYPE html> <html> <head> < ...

  6. django（3） 一对多跨表查询、ajax、多对多

    1.一对多跨表查询获取数据的三种形式:对象.字典.元组 例:有host与business两张表,host与business的id字段关联,business在host表中的对象名是b,  通过查询hos ...

  7. AJAX XML返回类型

    例题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. myBatis批量查询操作，xml中使用foreach案例

    使用场景:有一个订单表,实体类为OrderBase.java,订单有个状态为status值可能为"1,2,3,4,5,6",现在需要查询状态为"2,3,4"的订 ...

  9. ajax XML

    <script src="jquery-1.11.2.min.js"></script> </head> <body> <se ...

随机推荐

  1. UEditor上传功能

    参考文件http://www.itnose.net/detail/6307204.html 1．复制整个ueditor文件夹到项目任意目录中. 2．添加Web窗体,并按以下方式引用配置和源文件,并实例 ...

  2. SDUT 2603:Rescue The Princess

    Rescue The Princess Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Several days ago, a b ...

  3. php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

    话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                ...

  4. Balance

    Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11947 Accepted: 7464 Description ...

  5. java中split()特殊符号"." "|" "*" "\" "]"

    关于点的问题是用string.split("[.]") 解决. 关于竖线的问题用 string.split("\\|")解决. 关于星号的问题用 string. ...

  6. Android的消息处理机制Looper,Handler,Message

    android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道,因 ...

  7. placeholder 解决UITextField中placeholder和text文本同时显示的问题

    TextField都使用了placeholder属性,但在代码中又设置了text属性,因此ViewController会同时显示placeholder文本和text文本. 这个问题让我彻底崩溃.按道理 ...

  8. asp.net MVC4 lognet4 日志

    asp.net MVC4 lognet4 日志 步骤: 1.引入log4net.dll 2.写配置文件 web.config 加入 如下代码 在<configSections> 中加入&l ...

  9. Java爬虫工程师技能列表

    以下仅仅是自己一些粗浅认识.欢迎补充指正.欢迎进群交流! 掌握一半便能够熟练的开发爬虫玩了.自己正在努力中... 一.技能列表 1.掌握java.尤其编程网络部分:李刚的java基础至少看了三遍以上: ...

  10. Android 内存溢出解决方案（OOM） 整理总结

    在最近做的工程中发现加载的图片太多或图片过大时经常出现OOM问题,找网上资料也提供了很多方法,但自己感觉有点乱,特此,今天在不同型号的三款安卓手机上做了测试,因为有效果也有结果,今天小马就做个详细的总 ...