首页 > 代码库 > 火车站点城市查询（appserv 服务器练习）
火车站点城市查询（appserv 服务器练习）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
}
.tatle{width: 300px;height: 50px;background: #ccc;}
.show{width: 300px;height: 400px;border:1px solid #ccc;overflow: scroll;}
.tatle span{
display: inline-block;
width:20px;height: 20px;line-height: 20px;text-align: center;
}
h4{
width: 70px;
float:left;
}
.hot{
width: 300px;
height: 50px;border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="hot" class="hot"></div>
<div id="tatle" class="tatle"></div>
<div id="show" class="show"></div>
<script>
function $(id){
return document.getElementById(id);
}
var tat=$("tatle");
var show=$("show");
var hot=$("hot");
var spans=tat.getElementsByTagName("span");
for(var i=65;i<=90;i++){ //字母对应码值循环
var spant= document.createElement("span");//创建节点放字母
spant.innerHTML=String.fromCharCode(i);//码值转字符显示
tat.appendChild(spant);//节点插入tat
}
try{var http=new XMLHttpRequest;}
catch(e){http=new ActiveXObject("Microsoft.XMLHTTP");}
http.open("GET","city.json",true);//服务器与JSON文件建立连接
http.send();//发送请求
http.onreadystatechange=function(){
//存储函数 每当readyState属性改变时就会调用
if(this.readyState==4 && this.status==200){//判断是否完成响应且正常
var p=JSON.parse(this.responseText);//字符串转为对象赋值给p
for(var r=0;r<p.hotList.length;r++){//热门城市遍历输出
hot.innerHTML+="<h4>"+p.hotList[r][0]+"<h4>";
}
}
for(var j=0;j<spans.length;j++){//装字母的容器遍历
spans[j].onclick=function(){//点击字母
show.innerHTML="";
for(var i=0;i<p.cityList.length;i++){
if(p.cityList[i][1].charAt(0).toUpperCase()==this.innerHTML){
//获取cityList[i][1]的首字母转大写
show.innerHTML+="<p>"+p.cityList[i][0]+"</p>";//显示其对应城市
}
}
}
}
var hotcity=hot.getElementsByTagName("h4");
for(var y=0;y<hotcity.length;y++){
//遍历热门城市的容器
hotcity[y].onclick=function(){
show.innerHTML="";
for(var i=0;i<p.cityList.length;i++){
if(p.cityList[i][0].substr(0,2)==this.innerHTML.substr(0,2)){
//获取热门城市名,前两个字匹配
//substr(start,length) start:抽取的子串的起始下标,length:子串中的字符数
show.innerHTML+="<p>"+p.cityList[i][0]+"</p>";
//显示其匹配结果一样的站点
}
}
}
}
}
</script>
</body>
</html>
JSON文件：(部分省略)
{
"cityList":[
["北京东","beijingdong","bjd",1],
["北京","beijing","bj",15],
["北京南","beijingnan","bjn",3],
["北京西","beijingxi","bjx",4],
["广州南","guangzhounan","gzn",5],
["重庆北","chongqingbei","cqb",6],
["重庆","chongqing","cq"],
["重庆南","chongqingnan","cqn"],
["广州东","guangzhoudong","gzd"],
["上海","shanghai","sh"],
["上海南","shanghainan","shn"],
["上海虹桥","shanghaihongqiao","shhq"],
["上海西","shanghaixi","shx"],
]
"hotList":[
["北京","beijing","bj"],
["上海","shanghai","sh"],
["广州","guangzhou","gz"],
["长沙","changsha","cs"],
["石家庄","shijiazhuang","sjz"],
["南京","nanjing","nj"],
["郑州","zhengzhou","zz"],
["深圳","shenzhen", "sz"]
]
}
火车站点城市查询（appserv 服务器练习）