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>
JQM---列车时刻查询的更多相关文章
- 列车时刻表查询 jqm/ajax/xml
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 我的Android进阶之旅------>关于调用Webservice查询火车票时刻表的几个接口介绍
今天发现一个可以提供火车票时刻表查询的WebService,先记录下来以后如果写一个火车票时刻表查询的Android App的话就用的着.首先该WebService的的名字是TrainTimeWebS ...
- 出行服务类API调用的代码示例合集：长途汽车查询、车型大全、火车票查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 长途汽车查询:全国主要城市的长途汽车时刻查询,汽车站查询 车型大全 ...
- 查询执行成本高（查询访问表数据行数多）而导致实例 CPU 使用率高是 MySQL 非常常见的问题
MySQL CPU 使用率高的原因和解决方法_产品性能_常见问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/knowledge_detail/51587.html ...
- Python 利用微信端口查看列车时刻表
import requests """ 该程序查看列车时刻 """ url0 = 'http://www.webxml.com.cn/Web ...
- 假如我来架构12306网站---文章来自csdn（Jackxin Xu IT技术专栏）
(一)概论 序言: 此文的撰写始于国庆期间,当中由于工作过于繁忙而不断终止撰写,最近在设计另一个电商平台时再次萌发了完善此文并且发布此文的想法,期望自己的绵薄之力能够给予各位同行一些火花,共同推进国 ...
- 火车时刻表WebApp
关键词 :Ajax 跨域访问 php 同源策略 JQueryMobile 前言 在面试的过程中,兄弟连的徐老师提出要求我用JQuery Mobile(前端框架)来实现一个具有“火车时刻表”功能的Web ...
- 数据分析侠A的成长故事
数据分析侠A的成长故事 面包君 同学A:22岁,男,大四准备实习,计算机专业,迷茫期 作为一个很普通的即将迈入职场的他来说,看到周边的同学都找了技术开发的岗位,顿觉自己很迷茫,因为自己不是那么喜欢钻 ...
- Android和Linux应用综合对比分析
原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...
随机推荐
- mklink
$ mklink /D 参数:创建目录类型链接
- truncate table语句和delete table语句的区别
truncate table 表名 ; delete from 表名; 都是用来删除表中所有的记录,前者删除数据后表的标识列会重新开始编号,它比delete语句使用的系统资源和事务日志资源更少,但是表 ...
- Swift版的SQLiteHelper
SQLiteHelper 创建SQLiteHelper类 /// SQLite数据库处理帮助类 /// /// 此类中封装了关于SQLite数据库处理的业务函数 class SQLiteHelper ...
- This kind of launch is configured to open the Debug perspective when it suspends.
This kind of launch is configured to open the Debug perspective when it suspends. 因为设置了断点才会弹出这个,不需要调 ...
- MFC 自绘按钮 消息响应
单检测到按下消息时,发送一个消息 m_pParent->PostMessage(WM_COMMAND, IDC_BUTTON1); 然后再在消息映射里建立映射. ON_COMMAND(IDC_B ...
- Android常用客户端测试工具
Emmagee GT iTest PowerTutor 网速限制 Root Explorer ApkEditor 陆续添加...
- python selenium 操作chrome
1.下载chromedriver.exe 入在chrome 浏览器目录下 from selenium import webdriverimport os chromedriver = "C: ...
- 转 LoadRunner 技巧之THML 与 URL两种录制模式分析
Loadrunner的Virtual User Generator 提供人脚本的录制功能,对于初学者来说,这大大的降低了编写脚本的门槛,loadrunner提供两种录制脚本的方式:Html_based ...
- EM算法（4）：EM算法证明
目录 EM算法(1):K-means 算法 EM算法(2):GMM训练算法 EM算法(3):EM算法运用 EM算法(4):EM算法证明 EM算法(4):EM算法证明 1. 概述 上一篇博客我们已经讲过 ...
- hive中分析函数window子句
hive中有些分析函数功能确实很强大,在和sum,max等聚合函数结合起来能实现不少功能. 直接上代码演示吧 原始数据 channel1 2016-11-10 1 channel1 2016-11-1 ...