>

Jsp登录分界面,列车时刻表查询

- 编辑:正版管家婆马报彩图 -

Jsp登录分界面,列车时刻表查询

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎登录后台管理系统</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
<script src="js/cloud.js" type="text/javascript"></script>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liechebiao.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<style>
#btn{background-color:rgba(255,255,255,0.3);color:#ccc;}
#back{display:block;margin:0 auto;}
</style>
<script>
var url1 = "
var url2 = "
var url3 = "";
//请求加载详情:
var isAjax=false; //ajax使用小技巧
function city(Id){
$.mobile.loading("show"); //加载图标显示出来
if(isAjax) return; //如果为true,则正在加载,再点击多次都不会执行。
isAjax=true; //开始之前设为true
$.ajax({
type:'get',
url:url3,
data:{TrainCode:$("#num"+Id).text()},
timeout:30000,
success:function(data){
isAjax=false; //加载成功后设为false,此时又开始加载了
var info=$(data).find("TrainDetailInfo");
var trip="";
for(var i in info){ //解析xml文件
trip+='<tr><td>'+$(info).eq(i).find("TrainStation").text()+'</td><td>'+$(info).eq(i).find("StartTime").text()+'</td><td>'+$(info).eq(i).find("ArriveTime").text()+'</td></tr>'
$("#table").find("tbody").empty().append(trip);

<script language="javascript">
    $(function(){
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
    $(window).resize(function(){ 
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
    }) 
}); 
</script>

}
$.mobile.changePage("#index1"); //跳转到下一个页面
$.mobile.loading("hide"); //加载的图标隐藏起来

</head>

}
});

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">

}

 

$(document).on("pageinit","#index",function(){//页面初始化之后
$("#search_btn").on("click",function(){ //发送请求之前先校验
if($("#start").val()&&$("#end").val()||$("#num").val()){
var btn=$(this);
btn.button("option","disable",true);//设置搜索按钮不可再次点击
$.mobile.loading("show"); //设置加载图标显示
var url=url2 //默认url为url2,先判断再发送请求
var data={};
if($("#num").val()){ //如果填了车此次信息,就加在url2,
var data={TrainCode:$("#num").val()};
}
else{ //如果没填了车此次信息,就加在url1
var url=url1
var data={StartStation:$("#start").val(),ArriveStation:$("#end").val()};
}
$.ajax({
url:url,
type:'get',
data:data,
success:function(data){

    <div id="mainBody">
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div> 

var timeTables = $(data).find("TimeTable");
var detail="";
for(var i=0;i<timeTables.length;i++){
if(i>10) //第10条信息后面的就不要了
return false;

<div class="logintop">   
    <span>欢迎登录后台管理界面平台</span>   
    <ul>
    <li><a href="#">回首页</a></li>
    <li><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    </ul>   
    </div>
   
    <div class="loginbody">
   
    <span class="systemlogo"></span>
      
    <div class="loginbox">
    <form name=form1 method="post" action="dologin.jsp"  >
    <ul>
    <li><input name="uname" type="text" class="loginuser" value="admin" onclick="JavaScript:this.value=''"/></li>
    <li><input name="upwd" type="text" class="loginpwd" value="密码" onclick="JavaScript:this.value=''"/></li>
    <li><input name="" type="submit" class="loginbtn" value="登录"  onclick="javascript:window.location=''" /><label>
    <input name="" type="checkbox" value="" checked="checked" />记住密码</label><label><a href="#">忘记密码?</a></label></li>
    </ul>
    </form>
   
    </div>
   
    </div>
 
   
   
    <div class="loginbm">版权所有  2014  <a href=";  仅供学习交流,勿用于任何商业用途</div>
   
   
</body>

if(timeTables.find("FirstStation").text()=="数据没有被发现"){
alert("数据没有被发现");
return false;
}

</html>

detail+='<li><a href="###" onclick="city('+i+')" id="num'+i+'">'+$(timeTables).eq(i).find("TrainCode").text()+'</a><span>'+$(timeTables).eq(i).find("StartStation").text()+'--</span><span>'+$(timeTables).eq(i).find("ArriveStation").text()+'</span><br><span>'+$(timeTables).eq(i).find("StartTime").text()+'--</span><span>'+$(timeTables).eq(i).find("ArriveTime").text()+'</span><br><span>用时:'+$(timeTables).eq(i).find("UseDate").text()+'</span></li>';

page language="java" import="java.util.*" pageEncoding="utf-8"% !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...

$("#list").html(detail);
$("#list").listview("refresh");
$.mobile.loading("hide");
btn.button("option","disable",false);
}
}
});

}else{
alert("请输入出发站和终点站或者输入车次!");
}
});

});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main" class="ui-content">
<form action="###" methor="post" id="car_form">
<div class="ui-field-contain">
<label for="start">出发站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>
<input type="submit" value="搜索" id="search_btn">
<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="#index1" data-icon="grid" class="ui-btn-active">查询</a></li>
<li><a href="javascript:void(0)" data-icon="star">收藏</a></li>
<li><a href="javascript:void(0)" data-icon="gear">设置</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="index1">
<div data-role="header" data-position="fixed">
<h1>列车时刻表查询</h1>
</div>
<div role="main" class="ui-icon">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke" id="table">
<thead>
<tr>
<th>站点</th>
<th>到站时间</th>
<th>出发时间</th>
</tr>
</thead>
<tbody></tbody>
</table>

</div>
<div data-role="footer" data-position="fixed">
<a href="#" class="ui-btn ui-corner-all" data-rel="back" id="back">返回</a>
</div>
</div>
</body>
</html>

本文由web前端发布,转载请注明来源:Jsp登录分界面,列车时刻表查询