从 Jquery JSON 获得响应

Question

我无法从我的 php jquery / json / ajax 获得回复。我一直将所有这些不同的教程组合在一起，但我似乎仍然无法将它们全部组合在一起，因为没有一个教程遵循我正在尝试做的事情。

现在我正在尝试将两个 arrays（因为没有简单的方法来传递关联数组）传递给我的 jquery ajax function 并提醒它。 这是我的代码：

PHP

$names = array('john doe', 'jane doe');
$ids = array('123', '223');

$data['names'] = $names;
$data['ids'] = $ids;

echo json_encode($data);

Jquery

function getList(){
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        complete: function(data){ 
            var test = jQuery.parseJSON(data);
            alert(test.names[0]);
            alert("here");
        }
    },
        "json");
}
getList();

在我的 html 文件中，我真正调用的是用于调试目的的 javascript 文件。 我知道我返回的是 object，但我的名称部分出现 null 值错误，我不确定原因。 我错过了什么？

我的 PHP 文件返回

{"names":["john doe","jane doe"],"ids":["123","223"]}

它似乎只是在这里结束Uncaught TypeError: Cannot read property '0' of undefined所以我的 sub0 正在杀了我。

Answer 1

您可以使用 jQuery 提供的$.getJSON facade，这将为标准 JSON 请求设置所有必需的 ajax 参数：

$.getJSON('test.php', function(response) {
    alert(response.names[0]);   // john doe
}); 

但是我认为问题的根源是 1) 您的服务器可能没有返回正确的响应代码和/或正确的标头（即：JSON 数据） - 但是至少对于后者的上述方法应该强制得出这个结论。

参见： http://api.jquery.com/jQuery.getJSON

Answer 2

看起来问题是您使用的是完整回调而不是成功回调：

function getList(){
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        success: function(data) { /* success callback */
            var test = jQuery.parseJSON(data);
            alert(test.names[0]);
            alert("here");
        }
    },
    "json");
}
getList();

来自jQuery AJAX文档：

成功（数据，文本状态，jqXHR）

如果请求成功，将调用 function。 function 得到传三 arguments：从服务器返回的数据，根据dataType参数格式化； 描述状态的字符串； 和jqXHR（在jQuery 1.4.x，XMLHttpRequest）object。从jQuery 1.5开始，成功设置可以接受函数数组。 每个function都会依次调用。 这是一个 Ajax 事件。

完成（jqXHR，文本状态）

请求完成时调用 function（执行成功和错误回调后）。 function 通过了两个 arguments：jqXHR（在 jQuery 1.4.x，XMLHTTPRequest 中）object 和一个对请求状态进行分类的字符串（“成功”、“未修改”、“错误”、“超时”、“中止”或“解析器错误”）。 截至jQuery 1.5，完整设置可以接受函数数组。 每个function都会依次调用。 这是一个 Ajax 事件。

Answer 3

jQuery 想知道期望什么样的数据作为响应，否则它不知道如何解析它。

因此，如前所述，您使用dataType = 'json'属性告诉 jQuery。

function getList() {
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        dataType: "json",
        success: function(data) { 
            console.log(data);
        }
    });
}

最重要的是，让 PHP 将其内容显示为 json 而不是 html 是个好主意。为此，您可以通过设置header('Content-type: application/json');使用 header。 在您的 PHP 脚本中的任何 output 之前。 所以：

$names = array('john doe', 'jane doe');
$ids = array('123', '223');

$data['names'] = $names;
$data['ids'] = $ids;

header('Content-type: application/json');

echo json_encode($data);

Answer 4

您应该在单个 object 中传递 ajax() function 的所有参数。因此，应该有“dataType”选项。 此外，如果您明确设置数据类型，jQuery 将为您解析 JSON 数据。 完成回调将接收解析后的 JavaScript object 作为参数。

function getList() {
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        dataType: "json",
        success: function(test) { 
            alert(test.names[0]);
            alert("here");
        }
    });
}