从 Jquery JSON 获取响应

Question

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

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

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 文件。我知道我正在返回一个对象，但在我的名称部分出现空值错误，我不知道为什么。我错过了什么？

我的 PHP 文件返回

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

好像到这里就结束了 Uncaught TypeError: Cannot read property '0' of undefined 所以我的 sub0 杀了我。

Answer 1

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

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

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）

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

完成（jqXHR，文本状态）

请求完成时调用的函数（在执行成功和错误回调之后）。该函数获得两个参数：jqXHR（在 jQuery 1.4.x 中，XMLHTTPRequest）对象和一个对请求状态进行分类的字符串（“成功”、“未修改”、“错误”、“超时”、“中止”或“解析器错误”）。从 jQuery 1.5 开始，完整的设置可以接受一个函数数组。每个函数都会被依次调用。这是一个 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。您可以通过在 PHP 脚本中的任何输出之前设置 header('Content-type: application/json'); 来使用此标头。所以：

$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

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

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

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

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