javascript - 使用 jQuery $.post 返回的数组

Question

我有一个简单的代码可以切换数据库中的两个值并将它们返回给 jQuery，因此我可以为用户切换它们而无需刷新 apge。

问题是，我将它作为数组返回，console.log 显示数组正常，但我不知道如何从数组中获取数据。

通过 PHP 返回:

$data = array($id, $img1, $img2);
echo json_encode($data);

jQuery:

$.post("bg_images_ajax.php", "switch=yes&id="+id).done(function(data){
    $("#image-left-"+id).attr("src", "/images/backgrounds/"+data[1]).attr("alt", data[1]);
    $("#image-right-"+id).attr("src", "/images/backgrounds/"+data[2]).attr("alt", data[2]);
    console.log(data);
});

几乎每次我使用 Ajax 时，data[1] 都能正常工作，但在这里它似乎将整个返回的数组作为一个简单的字符串(data[2] 返回 6 这是数组 ["6", "blabla", "blablala"] 由 console.log 返回的第三个字符。

我试图让数组返回为:

["id" = "6", "img1" = "blabla", "img2" = "blalablala"]

并使用它来获得我需要的东西:

data.img1

但这只会返回 undefined。

我检查了关于 jQuery.post 的页面 http://api.jquery.com/jquery.post/但我不是瞎了就是太累了，因为我看不出自己做错了什么。

Ps.: 我也试过将响应格式放入 jQuery 代码，但它没有用(因为我不太确定将它放在哪里，尝试了两个地方，如此处所示(不是同时))。

$.post("bg_images_ajax.php", "switch=yes&id="+id, "json").done(function(data){
    $("#image-left-"+id).attr("src", "/images/backgrounds/"+data[1]).attr("alt", data[1]);
    $("#image-right-"+id).attr("src", "/images/backgrounds/"+data[2]).attr("alt", data[2]);
    console.log(data);
}, "json");

Answer 1

缺少PHP

header("Content-Type: application/json");

默认发送text/html。

jQuery 将结果视为一串(无效的)HTML，而不是将 JSON 解析为预期的数据结构。

---

此外，如果您想要一个对象(具有命名属性)而不是数组(通过数字索引访问)，那么您必须从 PHP 中的关联数组开始:

$data = array("id" => $id, "img1" => $img1, "img2" => $img2);