一个可以查询列车车次信息的WEBAPP

效果图

Train

框架

效果

代码

已上传到github

总结

用到了JQ Mobile 的form 、ul 和 table 组件

form 用来获取用户输入信息

form
ul 用来承载查询后的车次列表 li 为脚本动态生成

 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("StartTime").text()+ " - "+ that.find("ArriveTime").text()+'</p>'+
        '<p class="ui-li-aside">用时：'+that.find("UseDate").text()  +'</p>'+
        '</a></li>';

table 用来承载车次的详细信息

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);

请求

网络请求使用了jQuery中的封装好的Ajax的get方法

根据出发站到达站获取车次列表

$.get(urlPre+_url,_data,function(data){
    var list = $("#list");
    var $data = $(data);
    var timeTables = $data.find("TimeTable");
    
    var _arr = [];
        timeTables.each(function(index,obj){
        var i = index;
        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("StartTime").text()+ " - "+ that.find("ArriveTime").text()+'</p>'+
            '<p class="ui-li-aside">用时：'+that.find("UseDate").text()  +'</p>'+
        '</a></li>';
        
        _arr.push(_html);
        
        });
        
        if(_arr.length>0){
        list.html(_arr.join(""));
        
        list.listview("refresh");
        
        
        }
        $.mobile.loading("hide");
        searchBtn.button("option","disabled",false);
    
    }

根据车次获取详情

$.get(urlPre+url3,{TrainCode:trainCode},function(data){
    $("#detial").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");
    
});

需要改进的地方  

在本地测试时没有问题，但是上传到GitHub用GitHub Pages打开时出现了跨域的问题

原因是GitHub Pages是HTTPS协议，而Ajax中请求数据的地址并不支持HTTPS协议……

三个tab形同虚设…

ONE MORE THING

这个Demo依然是根据慕课网相关教程做的JQM Web App 列车时刻表  

晚上被高数整的有点郁闷…写写代码调节一下心情…

IDE是Hbuilder，尝试了一下打包为APP的功能…生成了Android和iOS的安装包…  

没有配置打包的参数，全是默认的配置，整个项目文件夹全给包进去了额…有点大了…