本文详细解析了在使用jQuery进行AJAX异步请求时，如何正确获取返回的JSON数据。重点指出了在回调函数内部直接使用return语句无法将数据返回给外层函数的常见错误，并提供了通过定义外部变量在success回调中赋值来解决该问题的正确代码示例。
jQuery AJAX获取JSON数据的问题描述
编写了一个用于查询结果的方法，但在调试过程中发现结果集确实包含数据。问题在于如何通过变量正确获取这些数据。
JScript code
相关代码片段如下：
function getChildNodeArrayByParentID(categoryCode) {
$.ajax(
{
type: "get",
url: "DynamicMenuItemsHandler.ashx",
data: { MenuItemCode: categoryCode },
async: false,
success: function(data) {
return data;
}
});
}
var jsonArray = getChildNodeArrayByParentID(01);var jsonArray = getChildNodeArrayByParentID(01);
按照上述方式获取的结果显示为undefined。尽管方法内部设置了返回结果，但调用者无法接收到该值，请求指导。
HTML code
AJAX请求与数据绑定的正确示例
参考代码示例：
function searchStu(page){//AJAX按页查询
var xm=$("#xm").val();
var xs=$("#xy").val();
var data="cus.xm="+xm+"&cus.xs="+xs+"&page="+page;
$.ajax({
type: "post",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "AccountList.action",//要访问的后台地址
data: data,//要发送的数据
complete :function(){},//AJAX请求完成时隐藏loading提示
success: callbackFun//msg为返回的数据，在这里做数据绑定
});
}
function callbackFun(msg){
$("#totalCount").html(msg.totalCount);
$("#page").html(msg.page);
$("#totalPage").html(msg.totalPage);
var data = msg.list;
var node=document.getElementById("datas");
removeChildrenRecursively(node);
var xy=$("#xy").find("option:selected").text();
$.each(data, function(i, n){
var row=$("<tr id='template' align='center'>"+
"<td id='xmtd'></td>"+
"<td id='xstd'></td>"+
"<td id='dhtd'></td>"+
"<td id='actd'></td>"+
"<td id='mmtd'></td>"+
"<td id='lxtd'></td>"+
"<td id='bjtd'></td>"+
"<td id='sctd'></td>"+
"<td id='operator'></td></tr>"
);
row.find("#xmtd").text(n.xm);
row.find("#xstd").text(xy);
row.find("#dhtd").text(n.dh);
row.find("#actd").text(n.ac);
row.find("#mmtd").text(n.mm);
row.find("#lxtd").text(n.lx);
row.find("#bjtd").text("编辑");
row.find("#sctd").html("<a href='../../DelAccount.action?id='"+n.id+">删除</a>");
row.find("#operator").html("<input type='checkbox' id='"+n.xh+"' value='"+n.xh+"'/>");;
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
} JScript code
解决异步回调返回值错误的修正方案
修正后的代码逻辑如下：
function getChildNodeArrayByParentID(categoryCode) {
var result="";
$.ajax(
{
type: "get",
url: "DynamicMenuItemsHandler.ashx",
data: { MenuItemCode: categoryCode },
async: false,
success: function(data) {
result = data;
}
});
return result;
}
var jsonArray = getChildNodeArrayByParentID(01);success: function(data) {
return data;
}
问题的核心在于，success回调函数中返回的data并未传递给外层函数。需要修改代码结构，具体方案如下：
function getChildNodeArrayByParentID(categoryCode) {
var result;
$.ajax(
{
type: "get",
url: "DynamicMenuItemsHandler.ashx",
data: { MenuItemCode: categoryCode },
async: false,
success: function(data) {
result = data;
}
});
return result;
}