新手业余学习。我哪里写错啦呢。求老师指点迷津。
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile -手机端-ajax跨域异步加载数据</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main">
<form>
<div>
<label>发车站</label>
<input type="text" id="search-begin">
</div>
<div>
<label>到达站</label>
<input type="text" id="search-end">
</div>
<div>
<label>车次</label>
<input type="text" id="search-no">
</div>
</form>
<input type="button" value="搜索" id="search-submit">
</div>
<ul data-role="listview" data-inset="true" id="list" >
<!---->
<li><a href="#">
<h2>G1次</h2>
<p>xxx-xxx</p>
<p>xxx-xxx</p>
<p class="ui-li-aside ui-li-desc">9：00开</p>
</a></li>
<li><a href="#">
<h2>G1次</h2>
<p>xxx-xxx</p>
<p>xxx-xxx</p>
<p class="ui-li-aside ui-li-desc">9：00开</p>
</a></li>
</ul>
</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>
<!--------------------neiye----------------------------->
<div data-role="page" id="detail">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main">
<h2>G1</h2>
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>站名</th>
<th>到站时间</th>
<th>出发时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>8</td>
<td>9</td>
</tr>
</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">查询</a></li>
<li><a href="#" data-icon="star" >收藏</a></li>
<li><a href="#" data-icon="gear" >设置</a></li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.js"></script>
<script><!--可以使用跨域资源共享的方法 在前面加上http://www.corsproxy.com/+地址-->
var urPre ="htto://www.corsproxy.com/"; //跨域中转
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 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.TraionCode = $("#search-no").val();
_url = url2; //按车次查询
}
$.get(urlPre + _url,_data,function(data){
var list = $("#list");
var timeTables = $(data).find("TimeTable"); //获取列表
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").test() +'">' +
'<h2>' +that.find("TrainCode").text() + '</h2>' + //标题
'<p>' +that.find("FirstStation").text() + '-' + that.find("LastStation").text() + '</p>' //起始-终点
'<p>用时：' +that.find("UseDate").text() + '</p>' + //用时
'<p>' + 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;
var getInfoByTrainCode = function(){
if(isAjax) return;
isAjax = true;
$.mobile.loading("show");
var trainCode = $(this).attr("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")
});
};
//绑定事件
var bindEvent = function(){
$("#search-submit").on("click",getTrainList);
$("list").on("click","a",getInfoByTrainCode);
};
$(document).on("pageinit","#index",function(){
bindEvent();
});
</script>
</body>
</html>
