spring boot +jquery mobile构建web APP

本文介绍了一个使用HTML和jQuery Mobile实现的列车时刻表查询应用,包括应用的基本结构、查询功能及展示方式。通过调用免费的公众接口服务,解决了跨域问题,并实现了车次列表查询及详细信息展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、项目目录
这里写图片描述
二、HTML源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列车时刻表查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/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" 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>

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
    var urlPre = "http://cors.itxti.net/?"; //跨域中转
    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;
            if (!$("#search-no").val()) {
                _data.StartStation = $("#search-begin").val();
                _data.ArriveStation = $("#search-end").val();
            } else {
                _data.TrainCode = $("#search-no").val();
                _url = url2;
            }

            $.get(urlPre + _url, _data,
                function (data) {
                    $("#list").html("");
                    var list = $("#list");
                    var timeTables = $(data).find("TimeTable");

                    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

        $.get(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");
            });

    };

三、项目完成后效果图:
这里写图片描述这里写图片描述这里写图片描述

四、重要说明
文中用到的接口,是免费的公众接口服务:TrainTimeWebService

地址:

http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx?
本项目要注意一个重要问题:在获取列车信息时由于存在跨域问题,引起很多麻烦。以下地址是作为跨域中转的,可以有效解决跨域问题
var urlPre = “http://cors.itxti.net/?”; //跨域中转
五、其它免费服务接口补充

天气预报:

http://www.webxml.com.cn/WebServices/WeatherWebService.asmx
?

验证码:

http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx

?

电子邮件验证:

http://www.webxml.com.cn/WebServices/ValidateEmailWebService.asmx
?

中英翻译:

http://www.webxml.com.cn/WebServices/TranslatorWebService.asmx
?

火车时刻表:

http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx
?

股票行情:

http://www.webxml.com.cn/WebServices/ChinaStockWebService.asmx
?

电视节目预告:

http://www.webxml.com.cn/webservices/ChinaTVprogramWebService.asmx
?

腾讯QQ在线状态查询:

http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx
?

Ip地址查询:

http://www.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx?op=getCountryCityByIp
?

Zabbix 是一个企业级分布式开源监控解决方案。 Zabbix 软件能够监控众多网络参数和服务器的健康度、完整性。Zabbix 使用灵活的告警机制,允许用户为几乎任何事件配置基于邮件的告警。这样用户可以快速响应服务器问题。Zabbix 基于存储的数据提供出色的报表和数据可视化功能。 Zabbix 支持主动轮询(polling)和被动捕获(trapping)。Zabbix所有的报表、统计数据和配置参数都可以通过基于 Web 的前端页面进行访问。基于 Web 的前端页面确保您可以在任何地方访问您监控的网络状态和服务器健康状况。适当的配置后,Zabbix 可以在监控 IT 基础设施方面发挥重要作用。无论是对于有少量服务器的小型组织,还是拥有大量服务器的大企业而言,同样适用。 Zabbix 是免费的。Zabbix 是根据 GPL 通用公共许可证的第二版编写和发布的。这意味着产品源代码是免费发布的,可供公共使用。主要讲解8个主题:1.     通过SNMP防火墙设备的监控2.     通过SNMP交换机设备的监控3.     对Windows的性能、服务、用户登陆监控4.     对Linux的性能、用户登陆情况进行监控5.     生产中常用的服务进行监控,如nginx,httpd,mysql,ceph,bind等6.     Zabbix分布式的部署和监控7.     常见的zabbix三种报警方式8.     使用grafana对zabbix中的数据进行展示
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值