新手業余學習。我哪里寫錯啦呢。求老師指點迷津。
<!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" >
</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>
