分享源代碼
xdwxls
2014-10-28
3 回答
舉報(bào)
0/150
提交
取消
分享源代碼
2014-10-28
舉報(bào)
2015-03-10
還是有 ? 跨域的問題 用了上面的代碼 ??
2015-03-05
<!-- --><!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>列車時(shí)刻表查詢</title>
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>
<body>
<!-- 第一個(gè)頁面 ?開始-->
<div data-role="page" id="index">
? ? <div data-role="header" data-position="fixed" >
? ? ? ? <h1>列車時(shí)刻表查詢</h1>
? ? </div>
? ? <div role="main" class="ui-content">
? ? ? ? <div class="ui-field-contain">
? ? ? ? ? ? <label>發(fā)車站:</label>
? ? ? ? ? ? <input type="text" name="text-basic" id="search-begin" value="">
? ? ? ? </div>
? ? ? ? <div class="ui-field-contain">
? ? ? ? ? ? <label>終點(diǎn)站:</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">設(shè)置</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</div>
<!-- 第一個(gè)頁面 結(jié)束-->
<!-- 第二個(gè)頁面 ?開始-->
<div data-role="page" id="detail">
? ? <div data-role="header" data-position="fixed">
? ? ? ? <h1>列車時(shí)刻表查詢</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">到站時(shí)間</th>
? ? ? ? ? ? ? ? <th data-priority="persist">出發(fā)時(shí)間</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">設(shè)置</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</div>
<!-- 第一個(gè)頁面 結(jié)束-->
<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的跨域中轉(zhuǎn)
? ? 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 () {
? ? ? ? //數(shù)據(jù)校驗(yàn)
? ? ? ? if ($("#search-no").val() || ($("#search-begin").val() && $("#search-end").val())) {
? ? ? ? ? ? var searchButton = $(this); //獲得搜索按鈕
? ? ? ? ? ? searchButton.button("option", "disabled", true); //將搜索按鈕點(diǎn)擊之后設(shè)置為不可用，防止多次點(diǎn)擊
? ? ? ? ? ? $.mobile.loading("show"); //設(shè)置加載框，一個(gè)加載旋轉(zhuǎn)按鈕
? ? ? ? ? ? var _data = {}; //網(wǎng)絡(luò)請求的參數(shù)
? ? ? ? ? ? var _url = url1; //網(wǎng)絡(luò)請求的url
? ? ? ? ? ? if (!$("#search-no").val()) { //如果車次沒有填 則下兩項(xiàng)應(yīng)該填了?
//StartStation、ArriveStation、TrainCode是接口要求的參數(shù)
? ? ? ? ? ? ? ? _data.StartStation = $("#search-begin").val();
? ? ? ? ? ? ? ? _data.ArriveStation = $("#search-end").val();
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? _data.TrainCode = $("#search-no").val();
? ? ? ? ? ? ? ? _url = url2;
? ? ? ? ? ? }
//發(fā)起get請求
? ? ? ? ? ? $.post(urlPre + _url, _data,
? ? ? ? ? ? ? ? ? ? function (data) { //回調(diào)方法
//alert("############################################！");
? ? ? ? ? ? ? ? ? ? ? ? $("#list").html("");
? ? ? ? ? ? ? ? ? ? ? ? var list = $("#list");
? ? ? ? ? ? ? ? ? ? ? ? var timeTables = $(data).find("TimeTable"); //找到xml數(shù)據(jù)中的項(xiàng)
? ? ? ? ? ? ? ? ? ? ? ? var _arr = []; //存放所有的車次
? ? ? ? ? ? ? ? ? ? ? ? timeTables.each(function (index, obj) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? var i = index;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (i > 10) return false; //只載入前10條
? ? ? ? ? ? ? ? ? ? ? ? ? ? var that = $(this);
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (that.find("FirstStation").text() == "數(shù)據(jù)沒有被發(fā)現(xiàn)") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("數(shù)據(jù)沒有被發(fā)現(xiàn)！");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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>用時(shí)：' + 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); //設(shè)置按鈕可以點(diǎn)擊了
? ? ? ? ? ? ? ? ? ? });
? ? ? ? } else {
? ? ? ? ? ? alert("請輸入發(fā)車站和終點(diǎn)站或輸入車次！");
? ? ? ? }
? ? };
? ? var isAjax=false//是否正在加載數(shù)據(jù)
? ? //獲取詳情
? ? 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); ?//為動(dòng)態(tài)生成的list設(shè)置事件
? ? };
? ? $(document).on("pageshow", "#index", function () {
? ? ? ? if (isbind) return
? ? ? ? isbind = 1;
? ? ? ? bindEvent();
? ? });
</script>
</body>
</html>
2014-11-03
求源代碼分享。。我為什么做的不行呢。