jQuery $.post 处理 JSON 响应答案

【问题标题】：jQuery $.post processing JSON responsejQuery $.post 处理 JSON 响应
【发布时间】：2012-05-15 13:57:13
【问题描述】：

我无法弄清楚如何从 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 中错误地循环了响应。非常感谢任何帮助！

【问题讨论】：

您希望makeArray 对您的image_links 对象做什么？使用console.log 进行调试会让你有更好的运气，alert 在字符串化时会弄得一团糟。
嗯，这就是我之前在另一个运行良好的应用程序中使用的。我不应该使用它吗？
但是你为什么使用makeArray？你希望$.makeArray({a: 'b', c: 'd'}) 做什么？服务器期望在$_POST['images'] 中找到什么？
你说得对，我实际上传递了另一个值，类似于 "1": {blue, green, red} 我正在使用 $.makeArray() 。但我不应该将它用于图像。当我摆脱 makeArray 时，它返回 {“1”：“image_link”}，但我仍然不知道如何从中获取“image_link”。当我尝试 response.images.1 时，它不起作用。
当你在控制台中运行 $(this).find('input[name=color_id]') ..你返回什么吗？当我尝试这样的事情时..它不会拾取输入元素。

标签： php jquery json

【解决方案1】：

好吧..您从帖子中返回的数据对象是：{"id":"abc","images":[{"color123":"somelink.com\/123","color223":"somelink.com\/‌223"}]};

如果您更改警报，您会找到您正在寻找的值：

$.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]);
        }
    }
);

【讨论】：

谢谢！出于某种原因，我将 json_encode($images) 添加到我的 php 中，这就是它搞砸的原因。

【解决方案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);
    ?>

【讨论】：

感谢指点！但它仍然无助于获取我需要的信息。对这方面有什么建议吗？
我已经更新了答案的 javascript 部分，试试看 :) 您不需要执行“images[]”，因为发布一个 javascript 数组会自动为您执行此操作
这只是一次遍历响应字符串的每个字母。它没有抓取完整的字符串，我不知道为什么
您的浏览器或谷歌浏览器中是否有检查元素？您将能够检查网络请求，并检查发送出去的变量。如果你有我发布的内容，它应该可以工作。在这一点上，我最好的猜测是检查通过 AJAX 发送的内容，并确认它确实是一个数组
至少，明确一点也没有坏处

【解决方案3】：

一个非常基本的例子是这样的：

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

PHP 示例

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

【讨论】：