<!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. 服务器数据库搭建流程（CentOs+mysql）

    前言: 服务器上数据库搭建需要知道Linux系统的版本,以前的Ubuntu14.04直接在终端下输入apt-get install (package)便可方便的下载并安装mysql,但是在centOs ...

  2. vbs文件小技巧

    vbs文件介绍: VBS是基于Visual Basic的脚本语言.VBS的全称是:Microsoft Visual Basic Script Editon.(微软公司可视化BASIC脚本版). 可以新 ...

  3. npm学习总结

    1.npm run [scripts name]的作用及意义: npm 局部安装的工具包不能像全局安装那样直接执行命令行,但可写成命令行执行语句,通过npm run来运行,该命令可将node_modu ...

  4. ACM 序号互换

    序号互换 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 Dr.Kong设计了一个聪明的机器人卡多,卡多会对电子表格中的单元格坐标快速计算出来.单元格的行坐标是由数字 ...

  5. CoreGraphics--饼状图

    //传入数据,饼状图 pieChartView.dataArr = @[@20,@50,@80,@70,@40]; - (void)drawRect:(CGRect)rect { // Drawing ...

  6. SEO-站外优化规范

    站外优化规范 新站 前期(提高网站曝光率<信息发布平台>) 一． 分类目录信息发布 二． 黄页网信息发布 三． 友链平台信息发布 四． 各大论坛引蜘蛛区信息发布 五． 网址提交 六． 社区 ...

  7. fopen参数

    此文用于学习交流 原作:http://www.cnblogs.com/ai616818/archive/2012/04/26/2470918.html FILE * fopen(const char ...

  8. css重要属性之辩

    一.relative 1)与兄弟 relative对absolute 1.限制left/top/right/bottom定位 2.限制z-index层级: 3.限制在overflow下 relativ ...

  9. 【树莓派】制作树莓派最小镜像：img裁剪瘦身

    制作树莓派镜像,可以参考这篇文章:http://blog.csdn.net/talkxin/article/details/50456282 摘录部分要点内容如下(如果作者不允许转载,请联系即删除): ...

  10. 定时任务框架APScheduler学习详解

    APScheduler简介 在平常的工作中几乎有一半的功能模块都需要定时任务来推动,例如项目中有一个定时统计程序,定时爬出网站的URL程序,定时检测钓鱼网站的程序等等,都涉及到了关于定时任务的问题,第 ...