锐客网

  1. 首页 > 睿知 > it技术 > >

火车站点城市查询（appserv 服务器练习）

IT知识火车站服务器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文件：(部分省略)
【火车站点城市查询（appserv 服务器练习）】{
"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"]
              ]
}
 











































































































    推荐阅读


    上一篇：关于android-support-v4.jar包的错误

    下一篇：Spring Application Context文件没有提示功能解决方法