jQuery 中使用 Ajax 获取 JSON 格式数据示例代码
一、前置核心知识点补充
✅ JSON 核心介绍
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式存储和表示数据，基于 JavaScript 的对象字面量语法，由「键值对」和「数组」组成，是前后端数据交互的主流格式。JSON 文件中存储的是标准的 JSON 格式文本，数据由{}包裹对象、[]包裹数组，键名和字符串类型的值必须用双引号包裹，格式简洁且解析速度快。
✅ jQuery Ajax 与 JSON 关联核心说明
在 jQuery 中，获取 JSON 格式数据有两种核心方式：原生封装的$.ajax()方法 和 JSON 专属快捷方法$.getJSON()，两种方式本质相通，核心优势是：当指定数据类型为 JSON 后，jQuery 会自动将后端返回的 JSON 格式字符串解析为 JavaScript 原生对象 / 数组，无需手动调用JSON.parse()或$.parseJSON()，可直接在回调函数中通过 .属性名 或 [索引] 调用数据，极大简化开发流程。
✅ 核心前置区分
- JSON 文本 / 文件：是存储在服务器的静态文本数据（如本文的music.txt），格式为标准 JSON 字符串，本质是文本资源；
- JSON 响应数据：是后端接口（aspx/asmx/ashx）处理业务后，返回给前端的标准 JSON 格式字符串；
- 解析后的 JS 对象：前端通过 Ajax 获取 JSON 数据后，jQuery 自动转换后的产物，可直接操作，是前端渲染页面的核心数据载体。
二、jQuery 读取本地 JSON 文件（music.txt）示例
music.txt 中的 JSON 内容
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]
HTML 代码
<div>点击按钮获取JSON数据</div>
<input type="button" id="button" value="确定" />
<div id="result"></div>
使用 Ajax 获取 JSON 数据
$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type:"GET",
url:"music.txt",
dataType:"json",
success:function(data){
var music="<ul>";
//i表示在data中的索引位置，n表示包含的信息的对象
$.each(data,function(i,n){
//获取对象中属性为optionsValue的值
music+="<li>"+n["optionValue"]+"</li>";
});
music+="</ul>";
$('#result').append(music);
}
});
return false;
});
});
简化版：使用 $.getJSON () 方法获取 JSON 文件
$(document).ready(function(){
$('#button').click(function(){
$.getJSON('music.txt',function(data){
var music="<ul>";
$.each(data,function(i,n){
music+="<li>"+n["optionValue"]+"</li>";
});
music+="</ul>";
$('#result').append(music);
});
return false;
});
});
✅ 本段核心知识点补充
- dataType:"json" 是核心配置：作用是告诉 jQuery「本次请求的返回数据是 JSON 格式」，请求成功后会自动完成字符串→JS 对象的解析，回调函数的data参数就是解析后的 JS 数组；
- $.each() 遍历规则：第一个参数i为数组索引，第二个参数n为当前遍历的 JSON 对象，调用对象属性支持两种写法：n.optionValue 等价于 n["optionValue"]，后者更适合属性名含特殊字符的场景；
- 数据渲染逻辑：通过字符串拼接 HTML 标签，再用append()插入页面，是前端解析 JSON 数组后渲染列表的经典基础写法；
- return false 作用：阻止按钮点击的默认行为，避免页面意外刷新导致 Ajax 请求中断。
三、jQuery Ajax 异步处理 Json 数据详解
jquery ajax 处理 json 数据其实与其它 ajax 处理数据没什么很大的改动，我们只要简单处理一下 ajax 部份的 dataType 数据类型等于 json 即可解决了。
使用 AJAX 请求来获得 JSON 数据，并输出结果
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
$.getJSON () 等价于完整的 Ajax 写法
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
✅ 补充核心知识点
- 传参规则：发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（键值对映射），jQuery 会自动将其转换为key=value&key2=value2的字符串格式，并进行 URL 编码，后端直接通过 GET 方式接收即可；
- 回调数据规则：传递给 success 回调的返回数据，是已经解析好的 JavaScript 对象 / 数组，只有当返回数据格式非标准 JSON 时，才需要手动使用$.parseJSON()方法二次解析。
从 test.js 载入 JSON 数据并获取指定字段
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
✅ 补充说明
该写法适用于多层嵌套的 JSON 数据，json.users 表示获取 JSON 对象中的users数组，json.users[3] 表示数组的第四个元素，.name 表示获取该元素对象的name属性，是前端解析嵌套 JSON 的标准写法。
四、jQuery Ajax + ASP.NET 交互实例
首先给出要传的 json 数据：[{"demoData":"This Is The JSON Data"}]
1、使用普通的 aspx 页面来处理
$.ajax({
type: "post",
url: "Default.aspx",
dataType: "json",
success: function (data) {
$("input#showTime").val(data[0].demoData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
后台传递数据的代码
Response.Clear();
Response.Write("[{"demoData":"This Is The JSON Data"}]");
Response.Flush();
Response.End();
✅ 核心知识点补充
- 数据解析规则：这种处理方式下，后端直接返回纯标准 JSON 格式字符串，前端dataType:"json"会自动解析为 JS 数组对象，因此前端可直接通过 data[0].demoData 调用数据，无需额外转换；
- Response.Clear() 作用：清空ASP.NET页面默认的 HTML 输出，避免返回的 JSON 数据中夹杂其他文本，导致前端解析 JSON 失败；
- 优势：写法简单，无需额外配置，适合简单的业务数据交互。
2、使用 webservice (asmx) 来处理
$.ajax({
type: "post",
url: "JqueryCSMethodForm.asmx/GetDemoData",
dataType: "json",/*这句可用可不用，没有影响*/
contentType: "application/json; charset=utf-8",
success: function (data) {
$("input#showTime").val(eval('(' + data.d + ')')[0].demoData);
//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
asmx 的方法代码
[WebMethod]
public static string GetDemoData() {
return "[{"demoData":"This Is The JSON Data"}]";
}
✅ 核心知识点补充（asmx 与 aspx 的核心差异）
- 数据返回格式不同：ASMX WebService 会将后端返回的字符串，自动包裹在{d: "返回内容"}的 JSON 对象中，因此前端获取的data不是直接的 JSON 数组，而是data.d，data.d的内容才是后端返回的 JSON 字符串；
- 必须手动解析：因为data.d是字符串格式，所以需要通过eval('(' + data.d + ')')将其解析为 JS 数组对象，才能调用[0].demoData；加小括号的原因是避免 JSON 字符串的{}被解析为代码块，强制转为表达式解析；
- contentType: "application/json; charset=utf-8" 是必配项：该配置告诉 WebService 接口，前端传递的参数格式为 JSON，同时指定编码，缺一不可；
- 方法特性：WebService 的[WebMethod]注解必须标注，且方法必须为static静态方法，否则无法被前端调用。
五、jQuery Ajax 获取 JSON 数据 + HTML 模板绑定数据
HTML 模板代码
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>订单ID</th>
<th>客户ID</th>
<th>雇员ID</th>
<th>订购日期</th>
<th>发货日期</th>
<th>货主名称</th>
<th>货主地址</th>
<th>货主城市</th>
<th>更多信息</th>
</tr>
<tr id="template">
<td id="OrderID"></td>
<td id="CustomerID"></td>
<td id="EmployeeID"></td>
<td id="OrderDate"></td>
<td id="ShippedDate"></td>
<td id="ShippedName"></td>
<td id="ShippedAddress"></td>
<td id="ShippedCity"></td>
<td id="more"></td>
</tr>
</table>
✅ 前置核心说明
一定要注意的就是里面所有的 id 属性，这是模板绑定的核心：模板中每个数据展示节点的 id，与 JSON 数据中的字段名一一对应，通过克隆模板、赋值数据、追加到页面的方式，实现数据的批量渲染，是前端无刷新渲染列表的最优方案之一。
AJAX 请求和绑定数据的代码
$.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "BackHandler.ashx",//要访问的后台地址
data: "pageIndex=" + pageIndex,//要发送的数据
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
success: function(msg){//msg为返回的数据，在这里做数据绑定
var data = msg.table;
$.each(data, function(i, n){
var row = $("#template").clone();
row.find("#OrderID").text(n.订单ID);
row.find("#CustomerID").text(n.客户ID);
row.find("#EmployeeID").text(n.雇员ID);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
✅ 本段核心知识点补充
- 模板克隆核心：$("#template").clone() 克隆 HTML 模板中的空行，生成新的 DOM 节点，不会修改原模板，保证可以循环克隆使用；
- 数据赋值方式：row.find("#OrderID").text(n.订单ID) 表示在克隆的节点中，找到 id 为OrderID的 td 标签，将 JSON 数据的订单ID赋值为该标签的文本内容，精准匹配模板与数据；
- 数据格式化：ChangeDate(n.订购日期) 是自定义日期格式化函数，将后端返回的日期数据转换为前端需要的格式，是业务开发的常用技巧；
- 非空判断：if(n.发货日期!== undefined) 避免 JSON 数据中该字段为空时，页面渲染出undefined的无效内容；
- 动态修改 ID：row.attr("id","ready") 避免页面中出现多个相同 id 的 DOM 节点，符合 HTML 规范，同时防止后续 DOM 操作出错；
- complete回调：无论请求成功或失败，都会执行该回调，适合做「加载中」提示的隐藏，提升用户体验。
完整 HTML 页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test1</title>
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
<div>
<div>
<br />
<input id="first" type="button" value=" << " /><input id="previous" type="button"
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
value=" >> " />
<span id="pageinfo"></span>
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</th>
</tr>
<tr id="template">
<td id="OrderID">
</td>
<td id="CustomerID">
</td>
<td id="EmployeeID">
</td>
<td id="OrderDate">
</td>
<td id="ShippedDate">
</td>
<td id="ShippedName">
</td>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>
其他模板写法
<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
</span>
<span id="CustomerID">
</span>
<span id="EmployeeID">
</span>
<span id="OrderDate">
</span>
<span id="ShippedDate">
</span>
<span id="ShippedName">
</span>
<span id="ShippedAddress">
</span>
<span id="ShippedCity">
</span>
<span id="more">
</span>
</li>
</ul>
✅ 补充核心优势说明
该开发模式的核心优点：前后端完全解耦、分工明确
- 前端页面无任何服务端控件、无 form 表单，纯静态 HTML+JS，只负责展示和数据渲染；
- 后端接口（ashx）只负责处理业务逻辑、返回 JSON 数据，不参与页面渲染；
- 美工修改页面样式 / 结构时，只需保证模板节点的id不变，前端 JS 无需修改，开发效率大幅提升；
- 实现页面「无刷新加载」，用户体验远优于传统的页面跳转刷新。
六、新增：jQuery Ajax 获取 JSON 数据 常见报错与避坑指南
1. 报错「parsererror 解析 JSON 失败」
- 原因：① 后端返回的 JSON 格式不标准（键名无双引号、单引号、末尾多余逗号）；② 后端返回的内容中夹杂其他文本（如 HTML 标签、报错信息）；③ 本地 JSON 文件编码非 UTF-8，出现中文乱码导致解析失败；
- 解决方案：核对 JSON 格式规范、后端添加Response.Clear()清空多余输出、将 JSON 文件编码改为 UTF-8。
2. 回调函数的 data 参数为 undefined
- 原因：① 请求地址url错误，请求了不存在的接口 / 文件；② 后端返回空数据；③ 请求方式（GET/POST）与后端接收方式不匹配；
- 解决方案：核对请求地址、检查后端业务逻辑、保证type配置与后端一致。
3. 调用数据时报错「n.xxx is undefined」
- 原因：① 前端调用的属性名与后端 JSON 的键名不一致（JSON 键名大小写敏感）；② JSON 数据为数组，未加索引直接调用属性；③ 嵌套 JSON 的层级调用错误；
- 解决方案：核对前后端键名、数组数据加索引调用、逐层解析嵌套 JSON。
4. ASMX WebService 请求无响应
- 原因：① 未添加[WebMethod]注解或方法非静态；② 缺少contentType: "application/json; charset=utf-8"配置；③ 跨域请求未做配置；
- 解决方案：按 WebService 规范编写后端方法、补充必配请求头。
5. GET/POST 请求选择建议
- GET 请求：适合查询数据、传递少量参数（如分页页码），请求速度快，可缓存，但参数会暴露在地址栏，有长度限制；
- POST 请求：适合提交数据、传递大量参数，参数在请求体中，更安全，无长度限制，本文中 aspx/asmx 交互均用 POST，是业务开发的首选。
