WebApp之JQuery Mobile实现火车列表信息查询
2024-05-12 08:06:25
一、项目源代码如下：
<!-- --><!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列车时刻表查询</title><meta name="viewport" content="width=device-width, initial-scale=1"><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 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"><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-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<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;//获取车次列表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; //网络请求的urlif (!$("#search-no").val()) { //如果车次没有填 则下两项应该填了 //StartStation、ArriveStation、TrainCode是接口要求的参数_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,function (data) { //回调方法//alert("############################################！");$("#list").html("");var list = $("#list");var timeTables = $(data).find("TimeTable"); //找到xml数据中的项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$.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("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");});};//绑定事件：搜索按钮的绑定事件var bindEvent = function () {$("#search-submit").on("click", getTrainList);$("#list").on("click", "a", getInfoByTrainCode); //为动态生成的list设置事件};$(document).on("pageshow", "#index", function () {if (isbind) returnisbind = 1;bindEvent();});</script>
</body>
</html>其中包含JQuery Mobile的支持js和css
二、项目演示效果如下：
三、项目源代码下载：
这里写链接内容
WebApp之JQuery Mobile实现火车列表信息查询相关推荐
- python火车票查询工具tkinter_python 3.6 tkinter+urllib+json实现火车车次信息查询功能...
一.概述 妹子工作时需要大量地查询火车车次至南京的信息,包括该车次到达站(南京站or南京南站).到达时间.出发时间等,然后根据这些信息做下一步工作. 版本结束,趁着间歇期,帮她弄了个简易的批量查询工具 ...
- mybatis学习(48):列表信息查询
数据库 目录结构 映入jar包和junit单元测试 com.geyao.mybatis.mapper AuthorMapper类 package com.geyao.mybatis.mapper;im ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...
- jQuery mobile插件基础知识笔记
一.简介 1.Jquery mobile是针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架. jQuery mobile是一个触控优化的HTML5 UI框架,旨在让所有智能手机.平 ...
- 使用 jQuery Mobile 和 CSS3 实现响应式设计
来自:http://www.open-open.com/lib/view/open1338083235214.html jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻 ...
- Android+Jquery Mobile学习系列(6)-个人信息设置
目录导航 本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便 ...
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——列表控件的使用
文章目录 5. 列表控件的使用 5.1 简单的新闻列表 5.2 音乐专辑列表的显示 5.3 更完善的音乐专辑列表 5.4 显示销售的商品列表 5.5 图书销量排名 5.6 简单的电话通讯录 5.7 让 ...
- 在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
2019独角兽企业重金招聘Python工程师标准>>> 后来查找资料,发现新增节点后虽然数据加载上去了,但是样式却没有加载上,因此在整个过程中有2个注意事项. 1.利用循环将json ...
- jQuery Mobile中列表项ol、ul中的li的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表项li的data-*选项 //带有 data-role="listvie ...
最新文章
- Eclipse插件安装
- KAFKA介绍（分布式架构）
- 没有bug队——加贝——Python 练习实例 29，30
- W3100SM-S 短信猫代码发送 上
- 来自intlsy‘s省选debug方法
- IOS 项目的瘦身工具
- from scapy.all import * 调试失败_记一次错：Vue-构建项目后使用 npm link 失败
- IOS中如何显示带有html标签的富文本
- 服务器总线协议_第一章----I2C总线协议入门
- Visual Studio Code启动时提示“Code安装似乎损坏。请重新安装。”、标题栏显示“不受支持”信息的解决办法
- MindManager22全新版思维导图软件工具
- WP个人主题源码Cosy3.1.3
- 团队管理22-团队文化
- NetBeans 尚未部署该模块错误 解决方案
- 认证资料大全（十三）------ Juniper Networks认证列表
- Linux平台卸载MySQL总结
- Android绝黑剑之AutoCompleteTextView、MultiAutoCompleteTextView之智能联想
- 【2020.10.29 洛谷团队赛 普及组】T2 U138014 魔法药水
- 深圳铨顺宏圆满落幕IOTE 2022第十八届国际物联网展
- 连接手表_千元跑步手表推荐