JQuery 获取 json 数据 $.getJSON 方法的实例代码
一、前置核心知识点补充
✅ jQuery $.getJSON () 方法核心介绍
$.getJSON() 是 jQuery 封装的专门用于请求 JSON 格式数据的 AJAX 快捷方法，属于 jQuery $.get() 方法的专属 JSON 版本，底层依然基于 jQuery 的 AJAX 核心实现。
- 核心语法：$.getJSON(url, [data], [success], [dataType])
- 核心特点：自动将服务器返回的 JSON 格式字符串，解析为 JavaScript 原生对象 / 数组，无需手动调用JSON.parse()或$.parseJSON()，直接在回调函数中使用数据，极大简化开发流程。
- 请求本质：默认发起 GET 类型 的 AJAX 请求，这也是该方法传参、后端接收参数的核心依据。
✅ 两个核心应用场景
- 同域请求：前端页面与后端接口在同一域名下，直接请求后端接口获取业务 JSON 数据（如项目信息、列表数据），是开发中最常用的场景；
- 跨域请求：通过 JSONP 跨域技术 实现不同域名下的接口请求，这是$.getJSON()的一大核心亮点，也是 jQuery 对 JSONP 跨域的极简封装。
✅ 核心区分：JSON 同域请求 & JSONP 跨域请求
- JSON 同域请求：请求的接口和前端页面同源（同域名、同端口、同协议），后端直接返回「纯 JSON 格式字符串」即可，前端可直接解析使用；
- JSONP 跨域请求：请求的接口和前端页面不同源，受浏览器「同源策略」限制，无法直接发起普通 AJAX 请求，需要后端配合返回「回调函数包裹的 JSON 数据」，前端通过回调函数接收解析，这是前端跨域的经典解决方案之一。
二、前台 $.getJSON 同域请求实例代码
function SelectProject() {
var a = new Array;
var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes");
if (typeof (r) != 'undefined') {
var arr = r.split(";");
$("#hidProjectInnerID").val(arr[0]);
$("#txtProjectNo").val(arr[1]);
$.getJSON("../Handler/GetProjectInfor.ashx", { key: "PaymentStatement", InnerID: $("#hidProjectInnerID").val() },
function (json) {
$("#labFinalCustomer").text(json.finalclient);
$("#labOrderNo").text(json.orderno);
var strDeviceTr = "";
$.each(json.workinghours, function (i, item) {
strDeviceTr += "<tr><td><lable name="infor"> " + item.description + "</lable> </td>";
strDeviceTr += "<td> </td>";
strDeviceTr += " <td><lable name="infor"> " + item.hoursdays + "</lable></td>";
strDeviceTr += "<td> 0.8</td>";
strDeviceTr += "<td><lable name="infor"> " + item.workinghour + " </lable></td>";
strDeviceTr += "<td> 0.8</td>";
strDeviceTr += "<td><lable name="infor"> " + item.workinghour + "</lable></td>";
strDeviceTr += "<td> </td>";
strDeviceTr += "</tr>";
});
$("#infor").append(strDeviceTr);
});
}
}
✅ 本段代码核心知识点补充
- $.getJSON 传参规则：第二个参数是键值对对象格式的 GET 参数，jQuery 会自动将其拼接为 url?key=xxx&InnerID=xxx 的格式，后端通过 GET 方式接收即可；
- 回调函数的json参数：是 jQuery 自动解析后的原生 JS 对象，这是$.getJSON()的核心便捷性，无需手动转换，直接调用属性 / 遍历数组；
- 数据遍历：使用 jQuery 的$.each()方法遍历返回的数组json.workinghours，第一个参数i是数组下标，第二个参数item是数组当前项的对象，直接调用item.属性名获取数据；
- 数据渲染：通过字符串拼接 HTML 标签，再用append()插入 DOM，是后端返回列表数据后，前端动态渲染页面的经典写法。
三、后端 ashx 一般处理程序返回 JSON 数据
string innerid = CommonClass.Request.GetRequest<string>("InnerID", "");
string key = CommonClass.Request.GetRequest<string>("key", "");
string result = "";
if (key == "StockOutApp" && innerid != "")
{
result = StockOutApp(innerid);
context.Response.Write(result);
}
else if (key == "PaymentStatement" && innerid != "")
{
result = PaymentStatement(innerid);
context.Response.Write(result);
}
#region 结算单信息
public string PaymentStatement(string _innerid)
{
try
{
string sql = @"select InnerID,pFinalClient,pOrderNo from se_ProjectMain where InnerID='" + _innerid + "'";
DataTable dt = SqlShift.GetDataTable(sql);
if (!CommonClass.DTRow.CheckDtIsEmpty(dt))
{
StringBuilder json = new StringBuilder();
json.Append(""innerid":""+dt.Rows[0]["InnerID"].ToString()+""");
json.Append(","finalclient":"" + dt.Rows[0]["pFinalClient"].ToString() + """);
json.Append(","orderno":"" + dt.Rows[0]["pOrderNo"].ToString() + """);
json.Append(","workinghours":" + GetWorkingHours(_innerid));
return "{" + json.ToString().Trim(',') + "}";
}
else
{
return string.Empty;
}
}
catch (Exception ex)
{
AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info);
return string.Empty;
}
}
public string GetWorkingHours(string _innerid)
{
try
{
string sql = @"select InnerID, wDescription,wWorkingHour,wHours_Days from se_ProjectWorkingHour where wProjectID='" + _innerid + "'";
DataTable dt = SqlShift.GetDataTable(sql);
if (!CommonClass.DTRow.CheckDtIsEmpty(dt))
{
StringBuilder json = new StringBuilder();
for (int i = 0; i < dt.Rows.Count; i++)
{
json.Append("{");
json.Append(""innerid":"" + dt.Rows[0]["InnerID"].ToString() + """);
json.Append(","description":"" + dt.Rows[0]["wDescription"].ToString() + """);
json.Append(","workinghour":"" + dt.Rows[0]["wWorkingHour"].ToString() + """);
json.Append(","hoursdays":"" + dt.Rows[0]["wHours_Days"].ToString() + """);
json.Append("},");
}
return "[" + json.ToString().Trim(',') + "]";
}
else
{
return string.Empty;
}
}
catch (Exception ex)
{
AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info);
return string.Empty;
}
}
#endregion <span style="background-color: initial;"> </span>
✅ 本段代码核心知识点补充
- 后端接收参数：因为$.getJSON()是GET 请求，所以后端通过GetRequest<string>()接收前端传递的key和InnerID参数，这是前后端参数传递的对应规则；
- 后端返回 JSON 的核心要求：必须返回标准的 JSON 格式字符串，键名必须用双引号包裹、字符串值用双引号，数组用[]包裹、对象用{}包裹，这是前端能正常解析的前提；
- 拼接 JSON 的方式：通过StringBuilder手动拼接 JSON 字符串，是.NET ashx 处理程序返回 JSON 的经典写法，拼接完成后通过context.Response.Write(result)直接输出，无需额外设置响应头；
- 嵌套 JSON 结构：后端拼接的 JSON 包含「单层属性 + 数组属性」，workinghours对应的值是GetWorkingHours()返回的 JSON 数组，和前端json.workinghours的遍历对应，这是 JSON 嵌套数据的标准写法；
- 异常处理：捕获数据库查询异常并写入日志，返回空字符串，避免前端因后端返回非 JSON 格式数据而报错。
四、通过 jquery 的 $.getJSON 做一个跨域 ajax 请求试验
✅ 前置知识点：为什么需要 JSONP 跨域？
浏览器的「同源策略」会禁止前端页面发起不同域名、不同端口、不同协议的 AJAX 请求，目的是保障网页安全，防止恶意网站窃取数据。但实际开发中，经常需要调用第三方域名的接口（如预约登记、天气接口、支付接口），此时就需要使用JSONP 实现跨域请求，而 jQuery 的$.getJSON()对 JSONP 做了完美封装，是前端跨域的最优方案之一。
✅ JSONP 跨域的核心原理
- JSONP 全称：JSON with Padding（带填充的 JSON）；
- 核心逻辑：利用<script>标签不受同源策略限制的特性，通过动态创建<script>标签请求跨域接口，后端返回「回调函数名 (标准 JSON 数据)」的格式，前端通过回调函数接收并解析 JSON 数据；
- jQuery 封装优势：$.getJSON()让开发者无需手动创建<script>标签，只需在请求地址后拼接&callback=?，jQuery 会自动处理回调函数的创建、请求发送和数据解析，极大简化跨域开发。
✅ PHP 后端跨域接口代码（原文完整保留）
/*预约登记 执行 接口*/
case "yuyue_interface":
$name = trim($_GET['name']);
$phone = trim($_GET['phone']);
$addr = trim($_GET['addr']);
$dt = date("Y-m-d H:i:s");
$cb = $_GET['callback'];
if($name == "" || $name == NULL){
echo $cb."({code:".json_encode(1)."})";
}elseif($phone == "" || $phone == NULL){
echo $cb."({code:".json_encode(2)."})";
}elseif($addr == "" || $addr == NULL){
echo $cb."({code:".json_encode(3)."})";
}else{
$db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)");
echo $cb."({code:".json_encode(0)."})";
}
exit;
break;
✅ PHP 后端核心知识点补充
- 必传参数callback：前端请求地址拼接了&callback=?，jQuery 会自动生成随机的回调函数名并替换?，后端必须通过$_GET['callback']接收这个回调函数名，这是 JSONP 跨域的核心；
- 后端返回格式要求：必须返回 回调函数名 (JSON 数据) 的格式，如jQuery123456({code:0})，这是 JSONP 跨域的关键，前端才能通过回调函数接收数据；
- 业务逻辑处理：后端接收前端传递的name、phone、addr参数，做非空校验后执行数据库插入，通过code状态码返回处理结果（1 = 姓名空、2 = 手机空、3 = 地址空、0 = 成功），这是接口开发的标准状态码设计；
- 数据格式化：使用json_encode()对状态码进行格式化，保证返回的是标准 JSON 格式。
✅ 前端跨域请求代码
$(document).ready(function(){
//以下3个为预约登记需要的参数
var name = "name"; //varchar类型，长度最多为8位（4个汉字）
var phone = "phone"; //varchar类型，长度为11位
var addr = "addr"; //varchar类型，长度最多为500位（250个汉字）
$.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
if(data.code==1){
//自定义代码
alert("姓名不能为空");
}else if(data.code==2){
//自定义代码
alert("手机不能为空");
}else if(data.code==3){
//自定义代码
alert("所在单位不能为空");
}else{
//自定义代码
alert("预约成功");
}
});
});
✅ 前端跨域核心知识点
- 跨域关键标识：请求地址末尾必须拼接 &callback=?，这是告诉 jQuery「本次请求是 JSONP 跨域请求」，jQuery 会自动完成后续的回调函数处理，缺一不可；
- 参数传递：依然是GET 方式传参，将name、phone、addr拼接在请求地址后，后端通过$_GET接收，和同域请求的传参规则一致；
- 回调函数的data参数：jQuery 会自动解析后端返回的「回调函数包裹的 JSON 数据」，最终在回调函数中拿到的data依然是原生 JS 对象，直接通过data.code判断业务状态即可，和同域请求的使用方式完全一致，这是 jQuery 封装的核心优势；
- 状态码判断：根据后端返回的code值做不同的业务处理，是前后端接口交互的标准写法，清晰易懂且便于维护。
✅ 跨域核心注意事项
需要注意的是，在后端 php 代码里，必须把传递进来的 “&callback=?” 也输出来，如：
$cb = $_GET['callback'];
echo $cb."({code:".json_encode(4)."})";
五、$.getJSON () 方法的核心补充知识点
✅ 1. $.getJSON () 方法的完整语法与参数说明
$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
- url：必填，请求的接口地址（同域 / 跨域均可）；
- data：可选，发送给后端的参数，支持「键值对对象」或「拼接字符串」；
- success：可选，请求成功的回调函数，三个参数分别为：解析后的 JSON 数据、请求状态、jqXHR 对象；
- 该方法没有单独的 error 回调，如需捕获请求失败，可通过$.ajaxError()全局捕获，或改用完整的$.ajax()方法。
✅ 2. 同域 & 跨域的核心区别与使用总结
- 同域请求：请求地址是当前域名下的接口，无需拼接 callback=?，后端直接返回「纯 JSON 字符串」即可；
- 跨域请求：请求地址是其他域名的接口，必须拼接 callback=?，后端必须接收callback参数并返回「回调函数包裹的 JSON 数据」；
- 前端使用无差异：无论是同域还是跨域，前端在回调函数中使用数据的方式完全一致，这是 jQuery 封装的精髓。
