jQuery $.post 处理JSON响应

Question

我在弄清楚如何正确读取jQuery $.post()请求的JSON响应方面遇到了麻烦。

在下面的jQuery代码中，我根据相应的"color_entry_id"作为键，从DOM元素中获取字符串并填充关联数组：

var image_links = {};
$(this).find('input[name="color_id"]').each(function() {
    var color_entry_id = $(this).val();
    var image_link = $(this).parent().find('input[name="edit_image"].' + color_entry_id).val();
    image_links[color_entry_id] = image_link;
});

然后我发送POST请求，将我的“image_links”数组发送出去：

$.post(
    "test.php",
    { id: product_id, "images[]": jQuery.makeArray(image_links) },
    function(data) {
        var response = jQuery.parseJSON(data);
        $.each(response.images, function(index, item) {
             alert(item);
        });
    }
);

而且，如上所示，我尝试循环遍历响应数组并输出每个项，我希望它是一个字符串，但我只能得到警报值 "[object Object]"。我不知道如何显示我想要显示的字符串！

这是test.php的PHP代码：

<?php
    $product_id = $_POST['id'];
    $images = $_POST['images'];

    $response = array();
    $response['id'] = $product_id;
    $response['images'] = $images;

    echo json_encode($response);
?>

这是相关的DOM部分的外观：

<input type='hidden' value='{{ color_entry_id }}' name='color_id' />
<p><img src='{{ color_img_link }}' /></p>
<p>Image Link: <input class='{{ color_entry_id }}' name='edit_image' type='text' size='150' value='{{ color_img_link }}' /></p>
<div class='colors {{ color_entry_id }}'>
    <div class='img_color'>
        <a href='javascript:void' style='background:...' class='selected'></a>
        <p>...</p>
    </div>
</div>

我想知道是我在PHP端的JSON编码有误还是我在jQuery中遍历响应方式有误。非常感谢任何帮助！！

- Jon Rubins

---

你期望 makeArray 对你的 image_links 对象做什么？调试时最好使用 console.log，当它将对象转换为字符串时，alert 会使事情变得混乱。 - mu is too short

但是你为什么要使用 makeArray？你期望 $.makeArray({a: 'b', c: 'd'}) 做什么？服务器希望在 $_POST['images'] 中找到什么？ - mu is too short

当您在控制台中运行$(this).find('input[name=color_id]')时，是否会返回任何内容？当我尝试类似的操作时，它无法获取输入元素。 - ltiong_sh

是的，那部分可以。我确实得到了color_entry_id的值。 - Jon Rubins

这是一个提示。你从post中获取的数据对象是：{"id":"abc","images":[{"color123":"somelink.com/123","color223":"somelink.com/223"}]}；这意味着data.images是一个数组，其中有1个元素——一个具有2个colorxyz属性的对象。 - ltiong_sh

Answer 1

好的，那么你从POST获取回来的数据对象是：{"id":"abc","images":[{"color123":"somelink.com\/123","color223":"somelink.com\/‌​223"}]};

如果你改变alert语句，你就能找到你要寻找的值：

$.post(
    "test.php",
    { id: product_id, "images[]": jQuery.makeArray(image_links) },
    function(data) {
        var response = jQuery.parseJSON(data);

        var images = response.images[0];
        for (var i in images){
            alert(images[i]);
        }
    }
);

- ltiong_sh

---

谢谢！由于某种原因，我在我的PHP中添加了json_encode($images)，这就是为什么它出现问题的原因。 - Jon Rubins

Answer 2

$.post 默认期望XML格式的响应，你需要指定响应格式。

$.post(
    "test.php",
    { id: product_id, images : jQuery.makeArray(image_links) },
    function(response) {
        // Response is automatically a json object
        for(var i = 0; i < response.images.length; i++) {
            alert(response.images[i]);
        }
    }, 'json' // <-- HERE
);

此外，考虑在您的PHP脚本中添加一个内容类型头。

    <?php
    header("Content-type: application/json"); // Adding a content type helps as well
    $product_id = $_POST['id'];
    $images = $_POST['images'];

    $response = array();
    $response['id'] = $product_id;
    $response['images'] = $images;

    echo json_encode($response);
    ?>

- Bryan

---

谢谢指针！但仍无法帮助我获取所需的信息。对于该方面有什么建议吗？ - Jon Rubins

我已经更新了答案中的JavaScript部分，请尝试一下 :) 您不需要执行"images[]"，因为发布JavaScript数组将自动为您执行该操作。 - Bryan

你的浏览器或谷歌浏览器中有检查元素吗？你可以检查网络请求并检查发送的变量。如果你拥有我发布的内容，它应该可以工作。我目前最好的猜测是检查通过AJAX发送的内容，并确认它确实是一个数组。 - Bryan

至少，明确一点也不会有害。 - Bryan

如果我想使用延迟函数而不是匿名回调函数，该怎么办？例如$.post(url, {}, 'json').done(function(json){ //do something; });这样会起作用吗？（实际上对我来说没有起作用:( ) - alexserver

Answer 3

一个相当基础的例子是像这样的：

一个相当基础的例子是像这样的：

$.post('test.php', {"id": 42}, function (json) {
 console.log(json);
}, 'json');

PHP示例

$number = rand(1,$_POST["id"]);
return print json_encode($number);

- Bruno Ribeiro