最开始调试的时候老是不成功，也找不到问题在哪儿。后来请教了别人，才知道原来是跨域问题，应该本地搭建一个Web Server才行，后来自己在XAMPP上在调试成功了。
首先存一个data.json文件
[
{
"id":"001",
"title":"百度",
"url":"http://www.baidu.com"
},
{
"id":"002",
"title":"阿里",
"url":"www.alibaba.com"
},
{
"id":"003",
"title":"腾讯",
"url":"www.qq.com"
}
]
然后再在相同的目录下面新建一个test.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求json数据</title>
</head>
<body>
<div id="test"></div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function(){
$.ajax({
//请求方式
type:"GET",
//文件位置
url:"data.json",
//返回数据格式为json,也可以是其他格式如
dataType: "json",
//请求成功后要执行的函数，拼接html
success: function(data){
var str="<ul>";
$.each(data,function(i,n){
str+="<li>"+"ID："+n.id+"</li>";
str+="<li>"+"标题："+n.title+"</li>";
str+="<li>"+"地址："+n.url+"</li>";
});
str+="</ul>";
$("div").append(str);
}
});
});
</script>
</body>
</html>
执行结果如下：
附另一个代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求json数据</title>
</head>
<body>
<div id="goods_img"></div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url: "http://cd.jd.com/description/channel?skuId=10209516632&mainSkuId=10043622860&cdn=2", //用户处理页
dataType: "jsonp",
type: "POST",
scriptCharset: 'GBK',
//传送请求数据
success: function(data){ //这里的data是后台返回的值
info = data.content.replace(/data-lazyload=/g, "src="); ///xxxx/两个斜杠表示这个是正则表达式。后面的g表示匹配全部(即替换全部)
console.log( data.content ); //仅在控制台中打印相关信息
$("#goods_img").html(info);
}
})
});
</script>
</body>
</html>
小知识：
$(function(){...});就是
$(document).ready(function(){
// 开始写 jQuery 代码...
});
的缩写，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。另外，附一个jquery语法吧，真是超级简单啊。
其中 console.log的信息可以改成任意的其他信息，比如：
二、最终代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var province=["湖南","吉林","辽宁"]
var menu_data=[
{"id":"CN101250101","cityEn":"changsha","cityZh":"长沙","countryCode":"CN","countryEn":"China","countryZh":"中国","provinceEn":"hunan","provinceZh":"湖南","leaderEn":"changsha","leaderZh":"长沙","lat":"28.19409","lon":"112.982279"},
{"id":"CN101250102","cityEn":"ningxiang","cityZh":"宁乡","countryCode":"CN","countryEn":"China","countryZh":"中国","provinceEn":"hunan","provinceZh":"湖南","leaderEn":"changsha","leaderZh":"长沙","lat":"28.253928","lon":"112.553182"},
];
for (var m = 0; m < province.length; m++) {
//筛选level=1的对象
var menu_node1 = menu_data.filter(function (e) { return e.provinceZh == province[m]; });
document.write(province[m])
document.write(" ");
//遍历结果对象
for (var i = 0; i < menu_node1.length; i++) {
// document.write(menu_node1[i].cityZh);
document.write("<a href=/"+menu_node1[i].id+">"+menu_node1[i].cityZh+"</a>");
document.write(" ");
}
}
</script>
</body>
</html>
三、全国城市导航菜单
成果展示：
html代码：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://img.xuexiaodaquan.com/skin.css" media="all">
</head>
<body>
<!--Top-->
<div class="top">
<div class="top-content">
<script type="text/javascript">top_bg();</script>
</div>
</div>
<!--Top end-->
<!--Header-->
<div class="header">
<div class="header-content">
<div class="logo clearfix"> <a class="logo-name" href="/" target="_self" title="到上海学校大全首页">上海教育信息网</a>
<div class="logo-city">
<p><i></i>上海</p>
<a href="http://www.xuexiaodaquan.com" id="moreCity">全国学校查询</a>
<div id="moreCityList"></div></div>
</div>
<script type="text/javascript">top_search();</script>
</div>
</div>
<!--Header end-->
<body>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/pages.js" charset="utf-8" type="text/javascript"></script>
Js文件：
citylist