<!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 服务器练习）的更多相关文章

  1. Windows Server 2016-域站点复制查询

    了解了有关站点复制概念性内容后,后续几章节我们会围绕站点复制相关内容对域控的日常复制.维护等进行简单介绍.本章为大家带来有关域控站点复制查询的相关内容,希望大家可以喜欢.站点内域控制器之间的复制拓扑由 ...

  2. Python大法之从火车余票查询到打造抢Supreme神器

    本文作者:i春秋作家——阿甫哥哥 系列文章专辑:https://bbs.ichunqiu.com/forum.php?mod=collection&action=view&ctid=9 ...

  3. NET Core站点部署到Linux服务器

    .NET跨平台之旅:将QPS 100左右的ASP.NET Core站点部署到Linux服务器上 今天下午我们将生产环境中一个单台服务器 QPS(每秒请求数)在100左右的 ASP.NET Core 站 ...

  4. sitecore8.2 基于站点来查询item

    树形结构: /sitecore /content /foo-site /home /my-account /bar-site /home /my-account /baz-site /home /my ...

  5. 查询linux服务器有哪些IP在连接

    查询linux服务器有哪些IP在连接 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看linux的 ...

  6. .NET跨平台之旅：将QPS 100左右的ASP.NET Core站点部署到Linux服务器上

    今天下午我们将生产环境中一个单台服务器 QPS(每秒请求数)在100左右的 ASP.NET Core 站点部署到了 Linux 服务器上,这是我们解决了在 .NET Core 上使用 EnyimMem ...

  7. WAP站点(IIS/Apache)的服务器设置

    Server 端的设置IIS服务器:为了使IIS支持WAP(WML)页面的发布,在IIS的Web站点的属性 / HTTP信息中设置WAP的MIME属性,添加如下的MIME类型:扩展名 内容类型(MIM ...

  8. Sql Server 简单查询 异步服务器更新语句

    //结构:select 子句 [into 子句] from 子句  [where 子句] [group by 子句]  [having 子句] [order by 子句] select  dept_c ...

  9. SQL Server:查询当前服务器有多少连接请求

    有时DBA需要检查当前服务器有多少连接请求,以及连接请求的登录名,客户端版本,主机名,程序名等等之类的信息,我们就可以对服务器的连接状况有所了解,防止不明用户使用. SQL Server本身提供了这么 ...

随机推荐

  1. spring提供的线程池

    SPRING中的线程池ThreadPoolTaskExecutor 分类: JAVA Spring2013-07-12 10:36 14896人阅读 评论(9) 收藏 举报 Spring线程池多线程 ...

  2. beauty

    至你我最美的邂逅 年意渐渐消失,一转眼元宵的炮竹将要响起,今天是贰零一七年二月九号,即是元宵节前两天,在这里我写下我这几天的收获. 离元宵节还有四天,我好久都没跟朋友一起认真的玩过,几天我去了我发小的 ...

  3. mybatis基础，mybatis配置文件核心组件typeHandler元素

    无论是从预处理语句中设置一个值,还是从结果集里取出一个值,都会用类型处理器将获取的值以合适的方式转换成 Java 类型 可以重写类型处理器或创建你自己的类型处理器来处理不支持的或非标准的类型 实现 o ...

  4. Python 之 json 模块

    引言 对于做web开发的人来说,json文本必须要熟知与熟练使用的.大部分网站的API接口调用返回的数据,就是json格式的.如果看json对象所包含的内容,相信对熟悉Python的人开说,很快就能把 ...

  5. spring mvc中的拦截器小结 .

    在spring mvc中,拦截器其实比较简单了,下面简单小结并demo下. preHandle:预处理回调方法,实现处理器的预处理(如登录检查),第三个参数为响应的处理器(如我们上一章的Control ...

  6. loadrunner：判断是否服务器连接池瓶颈

    分析Web Resources中的Connections per second可以判断是否服务器连接池瓶颈. connections per second会给出两种不同状态的连接数:中断的连接和新建的 ...

  7. 循环单词 java

    链接:https://www.nowcoder.com/questionTerminal/9d5fbe7750a34d0b91c73943f93b2d7d来源:牛客网如果一个单词通过循环右移获得的单词 ...

  8. sql 两种分页offset和row_number简单分析

    新建临时表字段id,向临时表里插入1,2,3,4,5,6 if object_id('tempdb..#test') is not null drop table #test create table ...

  9. 使用cmd命令打开Python文件式程序方法

    首先:需要确定已编好的Python程序的存储路径:(即在哪个磁盘,哪个文件中) 其次:打开cmd命令,输入该程序所在磁盘,敲回车键:(例如其存储在E盘,则输入“E:”,敲回车键.) 然后:输入pyth ...

  10. 一次SocketException：Connection reset 异常排查

    问题描述 上一期的需求上线之后,线上多了一个异常:Connection reset.如下: [2017-03-22 00:45:00 ERROR] [creativeAuditTaskSchedule ...