在 jQuery 中，我们可以使用 $.getJSON() 方法通过 Ajax 请求获取服务器中 JSON 格式的数据。
图 1：默认效果
图 2：点击按钮后的效果
语法：
$.getJSON(url ,data, function(data){
……
})
$.getJSON() 是一个全局方法，所谓“全局方法”，指的是直接定义在 jQuery 对象（即$）下的方法。参数 url 表示被加载的文件地址；参数 data 表示发送到服务器的数据，数据为“键值对”格式；参数 function(data){} 表示请求成功后的回调函数，请求失败是不会处理的。
首先，我们在网站根目录下建立两个文件：一个是 info.json 文件，另一个是 getJSON.html 文件。
其中 info.json 文件内容如下。
[
{
"name":"小杰",
"sex":"男",
"age": 24
},
{
"name":"小明",
"sex":"男",
"age": 24
},
{
"name":"小红",
"sex":"女",
"age": 23
}
]
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.getJSON("info.json", function (data) {
//定义一个变量，用于保存结果
var str="";
$.each(data,function(index,info){
str += "姓名：" + info["name"] +"<br/>";
str += "性别：" + info["sex"] + "<br/>";
str += "年龄：" + info["age"] + "<br/>";
str += "<hr/>";
})
//插入数据
$("div").html(str);
})
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="获取数据" />
<div></div>
</body>
</html>
默认情况下，预览效果如图 1 所示。
图 1：默认效果
我们点击【获取数据】按钮后，此时预览效果如图 2 所示。
图 2：点击按钮后的效果
分析：
$.each(data,function(index,info){
str += "姓名：" + info["name"] +"<br/>";
str += "性别：" + info["sex"] + "<br/>";
str += "年龄：" + info["age"] + "<br/>";
str += "<hr/>";
})
上面这段代码用于遍历 JSON 对象，JSON 是一种数据格式，这个属于 JavaScript 的内容。如果小伙伴们不了解 JSON，可以看一下 C语言中文网的 JSON 教程。
在上面这个例子中，我们在使用 $.each() 方法的时候要特别小心。由于该 JSON 本质上是一个数组，因此我们应该使用 $.each() 操作数组的方法，而不是操作对象的方法。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23903.html