jQuery $.post 处理 JSON 响应

Posted 2023-05-08

【中文标题】jQuery $.post 处理 JSON 响应

【英文标题】：jQuery $.post processing JSON response

【发布时间】：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]') ..你返回什么吗？当我尝试这样的事情时..它不会拾取输入元素。

【参考方案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);