纯jq ajax写一个小的火车车次查询软件！

本文链接：https://blog.csdn.net/tianyu455764041/article/details/79506509

自己没事制作的移动响应式下面附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/train.css"/>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<div class="header-cen">
					<h1>火车车次查询</h1>
				</div>
			</div>
			<div class="main">
				<div class="main-cen">
					<div class="main-one">
						<form action="#" id="forml">
							<table>
								<tr>
									<td><p>发车站:</p></td>
									<td><input id="start" type="text" value="" placeholder="请输入始发站"></td>
								</tr>
								<tr>
									<td><p>终点站:</p></td>
									<td><input id="arrive" type="text" placeholder="请输入终点站"></td>
								</tr>
								<tr>
									<td><p>车次:</p></td>
									<td><input id="train" type="text" placeholder="请输入车次"></td>
								</tr>
							</table>
						</form>
						<button>搜索</button>
					</div>
					<div class="main-two">
						<img class="loading" src="../img/1470137289383875.gif"/>
					</div>
					<div class="main-three"> 
						
					</div>
				</div>
			</div>
			<div class="zhiding">
				<button>置顶</button>
			</div>
		</div>
	</body>

下面是css文件

*{margin: 0; padding: 0; border: 0;}
body{
	font-family:"宋体";
	background-color: #F9F9F9;
}
li{
	list-style: none;
}
a{
	color: #777; 
	text-decoration: none; 
	font-family:  "微软雅黑";
}
div{
	box-sizing:border-box;
}
.wrap{
	max-width: 640px;
	margin: auto;
	border: 1px solid #000;
}
/*.header*/
.header{
	line-height: 70px;
	background-color: mediumpurple;
}
.header-cen{
	margin: auto;
	text-align: center;
}
.header-cen h1{
	font-size: 40px;
	font-weight: bold;
	color: cornflowerblue;
	font-family:  "微软雅黑";
	
}
/*.main*/
.main-cen{
	margin: auto;
	text-align: center;
}
.main-cen:before{
	content:".";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
}
table{
	/*margin:20px;*/
	width: 100%;
	background-color: darkviolet;
}
table tr td:first-child{
	width: 12%;
}
table tr td:last-child{
	width: 80%;
}
table td p{
	font-family:  "微软雅黑";
	font-weight: bold;
	width: 100%;
	font-size: 25px;
	line-height: 40px;
	margin: 10px 0 10px 60px;
	text-align: left;
	padding-left:20px;
}
table input{
	width: 90%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 18px;
	padding-left: 20px;
	font-family:  "微软雅黑";
	font-weight: bold;
	outline: none;
}
.main-cen button{
	
	width:98%;
	margin:20px 10px;
	line-height: 50px;
	border: 1px solid #ddd;
	border-radius:50px;
	font-size: 22px;
	background-color:lightblue;
	outline: none;
}
.main-cen button:hover{
	background-color: cadetblue;
	color: white;
}
.main-three{
	background-color: #5F9EA0;
}
.main-three a{
	background-color: #90EE90;
}
.main-three .timetable{
	letter-spacing: 3px;
	font-family:  "微软雅黑";
	background-color: blue;
	text-align: left;
	margin:20px;
	border: 1px solid #ddd;
	border-radius:7px;
	background-color:white;
	padding-left: 50px;
	position: relative;
}
.main-three .timetable:hover{
	background-color:mediumorchid;
	color: red;
}
.main-three .timetable span{
	color: goldenrod;
	font-weight: bold;
	font-size: 20px;
}
.main-three .timetable h2{
	line-height: 30px;
	font-size: 20px;
}
.main-three .timetable h3{
	position: absolute;
	font-size: 20px;
	top:10px;
	right:100px;
}
.main-three .timetable h4{
	position: absolute;
	bottom:10px;
	right:90px;
	font-size: 20px;
}
.main-three .timetable p{
	line-height: 30px;
	font-size: 18px;
	font-weight: bold;
}
.main-three .timetable p:last-child{
	position: absolute;
	right:50px;
	top:55px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	color:white;
	font-weight: bold;
	border: 1px solid #ddd;
	border-radius:50%;
	background-color:rgba(145,245,122,0.4);
}
.main-three .yuan{
	width: 30px;
	height: 30px;
	border: 1px solid #ddd;
	border-radius:50%;
	position: absolute;
	right: 0;
	top: 30px;
}

img{
	width: 400px;
	height: 300px;
}
.loading{
	margin: auto;
	display: none;
	margin-top:50px;
	width: 400px;
	height: 300px;
}
.zhiding button{
	position: fixed;
	bottom:10px;
	right:20px;
	width: 80px;
	height: 50px;
	font-size: 20px;
	background-color: hotpink;
}












/*媒体查询*/
@media only screen and (min-width:1263px) and (max-width:1920px){
}
@media only screen and (min-width:990px) and (max-width:1263px){
}
@media only screen and (min-width:780px) and (max-width:990px){
	table td p{margin-left:30px; font-size: 25px;}
	table input{font-size: 18px;}
	.main-cen input{height: 35px;}
	.loading{width: 250px; height: 250px;}
}
@media only screen and (min-width:640px) and (max-width:780px){
	.header-cen h1{font-size: 30px;}
	table td p{margin-left:20px; font-size: 20px;}
	table input{font-size: 16px;}
	.main-cen input{height: 30px;}
	.main-cen button{width: 90%; line-height: 40px;}
	.loading{width: 200px; height: 200px;}
}
@media only screen and (min-width:480px) and (max-width:640px){
	.header-cen h1{font-size: 26px;}
	table td p{margin-left:10px; font-size: 16px;}
	table input{font-size: 15px; width: 80%;}
	.main-cen input{height: 30px;}
	.main-cen button{width: 90%; line-height: 40px;}
	.loading{width: 150px; height: 150px;}
	.main-three .timetable{padding-left:20px;}
	.main-three .timetable span{font-size: 18px;}
	.main-three .timetable h2{font-size: 18px;}
	.main-three .timetable h3{font-size: 18px; right: 15px;}
	.main-three .timetable h4{font-size: 18px; right: 15px;}
	.main-three .timetable p{font-size: 18px;}
	.main-three .yuan{right: 0;}
	.zhiding button{width: 60px; height: 50px; font-size: 20px;}
}
@media only screen and (min-width:320px) and (max-width:480px){
	.header-cen h1{font-size: 24px;}
	table td p{margin-left:0px; font-size: 16px; }
	table input{font-size: 15px; width: 80%;}
	.main-cen input{height: 30px; }
	.main-cen button{width: 90%; line-height: 40px;}
	.loading{width: 100px; height: 100px;}
	.main-three .timetable{padding-left:10px; letter-spacing: 0px;}
	.main-three .timetable span{font-size: 16px;}
	.main-three .timetable h2{font-size: 16px;}
	.main-three .timetable h3{font-size: 16px; right: 10px;}
	.main-three .timetable h4{font-size: 16px; right: 10px;}
	.main-three .timetable p{font-size: 16px;}
	.main-three .yuan{right: 0;}
	.zhiding button{width: 60px; height: 40px; font-size: 18px;}
	table tr td:first-child{width: 19%;}
	table tr td:last-child{width: 78%;}
}

然后是是jq 代码

<script src="../js/jquery-3.3.1.js"></script>  //引入jq 3.3.1
	<script>
		
		
		var main_three=$('.main-three') //分别获取div
		var _start;    //定义全局变量  始发站
		var _arrive;        //终点站
		var _train        //车次
		var traintime=[];  // 定义数组接收 后端传回的数据
		var index=0;          
		$('td input').keyup(search)  //给表单添加键盘事件
		
		function search () {
//			console.log('aaa')
			_start=$('#start').val();   //得到始发站
			console.log(_start);
			_arrive=$('#arrive').val(); //得到终点站
			console.log(_arrive);
			_train=$('#train').val();  //得到车次
			console.log(_train);
		}
		
		var main_two=$('.main-two')   //得到loading图
		
		
		
		
		_img=$('.main-two img')
		var _proxy="proxy.php?request=" //代理
		
		_find=$('button').eq(0)        //得到按钮
		_find.click(search_train)      //按钮点击事件
		
		function search_train () {
			_img.show();          //点击时loading图片
			traintime=[];          //数组
//			console.log('aa')
			if(_start==""||_arrive==""){    //如果始发和终点站有内容就按照这个搜索，如果只有车次则按照车次搜索
				if(_train==""){
					alert('请输入正确格式！');
					_img.hide()
			}else{
				code_search()   //调用车次函数
			}
		
	}else{
			addTime()   //调用始发和终点的函数
		}
	}
			
			

		function addTime () {
//				console.log("----"+http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=62a1765cba3549b39d05b3705a0d9626&StartStation="+_start+"&ArriveStation="+_arrive)
//				console.log("http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=62a1765cba3549b39d05b3705a0d9626&StartStation="+_start+"&ArriveStation="+_arrive)
				$.ajax({
				type:"get",
				url:_proxy+"http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=62a1765cba3549b39d05b3705a0d9626&StartStation="+_start+"&ArriveStation="+_arrive,
				async:true,
				dateType:"xml",
				success:function (data) {
//					console.log("----数组"+traintime)
					traintime=[];
					main_three.empty();
//					console.log(date);
					_img.hide();
					var _timetable_list=$(data).find('TimeTable');
					_timetable_list.each(function  () {
//						console.log(_timetable_list)
						_TrainCode=$(this).find('TrainCode').html()  //车次
//						console.log(_trainCode);
						_StartStation=$(this).find('StartStation').html() //始发站
						_ArriveStation=$(this).find('ArriveStation').html() //终点站
						_StartTime=$(this).find('StartTime').html()		//开始时间
						_ArriveTime=$(this).find('ArriveTime').html()   //到站时间
						_UseDate=$(this).find('UseDate').html()		//用时
						_KM=$(this).find('KM').html()			//公里
						
						var main=$("<div class='timetable'><a href='train_content.html?_TrainCode="+_TrainCode+"'><h2>车    次:<span>"+_TrainCode+"</span></h2><p>起  始 站:"+_StartStation+"</p><p>终  点 站:"+_ArriveStation+"</p><p>起始时间:<span>"+_StartTime+"</span></p><p>到站时间:<span>"+_ArriveTime+"</span></p><h3>用时:<span>"+_UseDate+"</span></h3><h4>距离:<span>"+_KM+"KM</span></h4><p>》</p></a></div>");
//						console.log(main)
//						main.appendTo(main_three)
						traintime.push(main)
//						console.log(traintime.length);
//						main_three.append(traintime[1])
					})
					 loading()
				}
			});
			
		}
		
		  
		function code_search () {
//			console.log('bbb')
			$.ajax({
				type:"get",
				url:_proxy+"http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=62a1765cba3549b39d05b3705a0d9626&TrainCode="+_train,
				async:true,
				dataType:"xml",
				success:function (data) {
					_img.hide();
					main_three.empty()
//					console.log(data)
					var _timetable_list=$(data).find('TimeTable');
					_timetable_list.each(function  () {
//						console.log(_timetable_list)
						_TrainCode=$(this).find('TrainCode').html()  //车次
//						console.log(_trainCode);
						_StartStation=$(this).find('StartStation').html() //始发站
						_ArriveStation=$(this).find('ArriveStation').html() //终点站
						_StartTime=$(this).find('StartTime').html()		//开始时间
						_ArriveTime=$(this).find('ArriveTime').html()   //到站时间
						_UseDate=$(this).find('UseDate').html()		//用时
						_KM=$(this).find('KM').html()			//公里
						
						var main=$("<div class='timetable'><a href='train_content.html?_TrainCode="+_TrainCode+"&&aa"+_start+"&&bb"+_arrive+"'><h2>车    次:<span>"+_TrainCode+"</span></h2><p>起  始 站:"+_StartStation+"</p><p>终  点 站:"+_ArriveStation+"</p><p>起始时间:<span>"+_StartTime+"</span></p><p>到站时间:<span>"+_ArriveTime+"</span></p><h3>用时:<span>"+_UseDate+"</span></h3><h4>距离:<span>"+_KM+"KM</span></h4><p>》</p></a></div>");
//						main_three.append(main)
						traintime.push(main)
//						console.log(traintime.length);
					})
					loading();
				}
			});
		}
		
		
		
		var _scrolltTop=$(window).scrollTop();
		var _scorllHeight=$(document).height();
		var _clentHeight=$(window).height();
		
		$(document).scroll(_scroll);
		
		function _scroll () {
			_scrollTop=$(window).scrollTop();
			_clientHeight=$(window).height();
			_scrollHeight=$(document).height();
			if(_scrollTop+_clientHeight>=(_scrollHeight-10)){
				loading();
		}
	}
		
		var zhiding=$('.zhiding button').eq(0)
		zhiding.click(ding)
		zhiding.hide()
	                //置顶功能
			function ding(){
				if(_scrollTop>0){
					$(window).scrollTop(0);
					console.log("=============");
				}
			}
	
		$(window).scroll(stick)
					function stick () {
						console.log('aaa')
						if(_scrollTop>0){
							zhiding.show();
						}else{
							zhiding.hide();
						}
					}
	
	                            //按需加载
				function loading () {
					for(var i=0;i<10;i++){
						main_three.append(traintime[index]);
						index++
					}
					
//					if(index>traintime.length){
//						return _scroll;
//					}
				}	
		
		
	</script>

车次的详细页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/train_content.css"/>
	</head>
	<body>
		<img src="../img/1470137329562941.gif" class="loading"/>
		<div class="main">
			<div class="main-cen">
				<ul>
					<li>车次</li>
					<li>到站时间</li>
					<li>出发时间</li>
					<li>公里数</li>
				</ul>
				<div class="main-cen-one">
					
				</div>
			</div>
			<div class="main-bottom">
				<button>返回</button>
			</div>
		</div>
	</body>

依旧是车次详细页面的css

*{margin: 0;padding: 0;border: 0;font-size:initial; font-size: 12px;}
body{
	font-family:"宋体";
	background-color: #DB7093;
}
li{list-style: none;}
a{color: #777; text-decoration: none; font-family:  "微软雅黑";}
div{box-sizing:border-box;}

li{list-style: none;}
.loading{
	width: 700px;
	height: 500px;
	margin-top: 13%;
	margin-left: 30%;
}
.main{
	margin-top: 30px;
	max-width: 1920px;
}
.main-cen{
	margin: auto;
	max-width: 1263px;
}
.main-cen ul{
	border: 1px solid #ddd;
}
.main-cen ul:hover{
	background-color: plum;
	color: white;
}
.main-cen ul span{
	color: plum ;
	font-size: 22px;
	font-weight: bold;
}
.main-cen ul:hover span{
	color: white;
}
.main-cen ul li{
	display: inline-block;
	width: 24%;
	line-height: 50px;
	text-align: center;
	letter-spacing: 3px;
	font-size: 20px;
	font-weight: bold;
	font-family:  "微软雅黑";
}


.main-cen-one ul{
	border: 1px solid #ddd;
}
.main-cen-one ul:hover{
	background-color: #ff5500;
	color: white;
}
.main-cen-one ul span{
	color: #ff5500;
	font-size: 22px;
	font-weight: bold;
}
.main-cen-one ul:hover span{
	color: white;
}
.main-cen-one ul li{
	display: inline-block;
	width: 24%;
	line-height: 50px;
	text-align: center;
	letter-spacing: 3px;
	font-size: 20px;
	font-weight: bold;
	font-family:  "微软雅黑";
}

.main-bottom{
	text-align: center;
}
.main button{
	width: 100px;
	height: 50px;
	/*margin: 20px;*/
	font-size: 20px;
}



@media only screen and (min-width:640px) and (max-width:780px){
	.loading{width: 300px; height: 300px; margin-top: 30%;}
	.main-cen ul li{font-size: 22px; margin-right:-5px;}
	.main-cen-one ul span{font-size: 20px;}
	.main-cen-one ul li{font-size: 6px; width: 25%; letter-spacing: 1px;}
}
@media only screen and (min-width:480px) and (max-width:640px){
	.loading{width: 200px; height: 200px; margin-top: 40%;}
	.main-cen ul li{font-size: 20px; margin-right:-5px;}
	.main-cen-one ul span{font-size: 18px;}
	.main-cen-one ul li{font-size: 14px; width: 25%; letter-spacing: 1px; margin-right:-5px;}
}
@media only screen and (min-width:320px) and (max-width:480px){
	.loading{width: 100px; height: 100px; margin-top:50%;}
	.main-cen ul li{font-size: 15px; margin-right:-2px;}
	.main-cen-one ul span{font-size: 16px;}
	.main-cen-one ul li{font-size: 12px; width: 26%; letter-spacing: 0px; margin-right:-5px; height: 50px; overflow: hidden;}
	.main button{width: 70px; height: 40px; font-size: 16px;}
}

jq代码

<script src="../js/jquery-3.3.1.js"></script>
	<script>
		var _main=$('.main-cen-one')
		var _url=location.href     
		
		console.log(_url)
//		http://127.0.0.1/ajax_lesson/jQuery_lesson/train_content.html?_TrainCode=2601\2604
		
		var prama=_url.split("?")[1].split("=")[1];
		
		 console.log(prama)
		  ajax(prama);
		function ajax (prama) {
			$('img').show();
			$('button').hide();
			$('.main-cen').hide();
			var _proxy="proxy.php?request="
			$.ajax({
				type:"get",
				url:_proxy+"http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=62a1765cba3549b39d05b3705a0d9626&TrainCode="+prama,
				async:true,
				dateType:'xml',
				success:function  (data) {
					console.log(data)
					$('img').hide();
					$('button').show();
					$('.main-cen').show();
					var list=$(data).find("TrainDetailInfo");
					list.each(function  () {
						var _TrainStation=$(this).find("TrainStation").html();      //站点名字
//						console.log(_TrainStation)
						var _ArriveTime=$(this).find("ArriveTime").html();			//到达时间
						var _StartTime=$(this).find("StartTime").html();       		//再次出发时间
						if(_ArriveTime==""){
							_ArriveTime="QAQ";
						}
						if(_StartTime==""){
							_StartTime="QAQ";
						}
						var _KM=$(this).find("KM").html();		 					//距离
						var result=$("<div class='TrainDetailInfo'><ul><li><span>"+_TrainStation+"</span></li><li> <span>"+_ArriveTime+"</span></li><li> <span>"+_StartTime+"</span></li><li> <span>"+_KM+"</span> KM</li></ul></div>");
						_main.append(result)
						})
					}
			});
			
		}
		
		$(".main-bottom button").click(_back);
			function _back(){
				history.back()
				
			}
		
	</script>