前端页面需要从服务端获取数据来动态渲染内容，这是再常见不过的需求了。jQuery 把这个过程做了高度封装，其中 getJSON() 方法就是专门用来通过 AJAX HTTP GET 请求从服务器拉取 JSON 格式数据的快捷工具。它本质上是对 $.ajax() 的一个简化封装，预设了请求类型为 GET，数据格式为 JSON。
语法结构与参数详解
这个方法的使用形式如下：
$(selector).getJSON(URL, data, success(data, status, xhr))
它包含三个参数，只有 URL 是必填项，其余两个都是可选的。
URL 参数就是你要请求的服务器地址，可以是相对路径，也可以是绝对路径。这个参数必须传递，不然请求根本没有目标。
data 参数是可选的，它用来携带发送给服务器的额外数据，通常以普通对象或者查询字符串的形式传递。比如你要根据用户 ID 拉取信息，就可以在这里传 { id: 1001 }，jQuery 会自动把它序列化拼接到 URL 后面。
第三个参数 success 是一个回调函数，在请求成功返回后执行。这个回调本身又能接收三个参数：data 存放着从服务器返回的 JSON 数据，此时它已经被 jQuery 自动解析成了 JavaScript 对象，可以直接用点语法访问；status 是一个表示请求状态的字符串，比如 "success"、"error" 等；xhr 则是底层的 XMLHttpRequest 对象，在需要获取 HTTP 状态码或响应头信息时能派上用场。
基础示例：从外部 JSON 文件读取并展示数据
下面这个例子模拟了一个很典型的场景。我们在项目中准备了一个 sample.json 文件，里面存放着学员的基本信息。页面上有一个按钮，点击后用 getJSON() 方法去请求这个文件，成功拿到数据后，先弹出提示框展示内容，再把这些信息追加到页面的指定区域里。
JSON 文件 sample.json 的内容如下：
{
"name" : "代码号学员张三",
"age" : "23",
"rollno" : "11",
"standard" : "Post-Graduate"
}
HTML 页面代码：
<!DOCTYPE html>
<html>
<head>
<title> jQuery getJSON() 获取数据示例 </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(event){
$.getJSON('sample.json', function(student,status) {
alert(" 以下数据来自外部 .json 文件。" + "\n姓名: " + student.name + "\n年龄: " + student.age + "\n编号: " + student.rollno + "\n学历: " + student.standard);
$('#data').append('<h3> 学员信息详情 </h3>');
$('#data').append('<p> 姓名: ' + student.name + '</p>');
$('#data').append('<p> 年龄: ' + student.age + '</p>');
$('#data').append('<p> 编号: ' + student.rollno + '</p>');
$('#data').append('<p> 学历: ' + student.standard + '</p>');
$('#data').append('<p> 请求状态: ' + status + '</p>');
});
});
});
</script>
</head>
<body>
<h2> 代码号学习编程 </h2>
<h3> jQuery getJSON() 方法实际运用 </h3>
<p> 点击下方按钮获取学员数据。 </p>
<div id = "data" style = "background-color : lightgreen;"> </div>
<button> 获取数据 </button>
</body>
</html>
在这个示例中，回调函数拿到了 student 对象后，直接用 student.name、student.age 这种方式来访问字段值，这是因为 getJSON() 已经在内部帮我们完成了 JSON 字符串的解析工作。同时页面之后还把请求状态 status 也显示了出来，正常情况下你会看到 "success"。
个人实践经验分享
在项目开发中，我遇到过 getJSON() 请求明明发了，但回调函数就是不执行的情况。排查后发现是服务端返回的内容虽然看起来像 JSON，但 Content-Type 响应头设置成了 text/html 或者其他格式，jQuery 识别不了就不触发成功回调。后来养成了一个习惯，在后端接口里明确设置 Content-Type: application/json，前端这边的问题就少了。
getJSON() 只有成功回调这一条路，它没有直接提供失败处理的参数位置。如果你的请求可能出错，比如文件不存在或者服务端返回了 500 状态码，getJSON() 不会触发回调。这种场景下我个人通常用 $.ajax 或 $.get 配合 .fail() 来做完整的错误捕获。对于静态 JSON 文件的读取来说 getJSON() 足够轻量好用，但涉及动态接口并且需要错误处理时，用更底层的 .ajax() 会更让人放心。
本节课程知识要点
使用 getJSON() 时，注意它是异步执行的，回调函数内部的代码会在数据返回后才运行，所以依赖数据渲染的逻辑需要写在这个回调函数里面，或者使用 Promise 式的链式调用。如果项目里用的是 jQuery 3.x 以上版本，getJSON() 返回的也是一个 Promise 对象，可以结合 .done()、.fail() 来增强代码可读性。
