如何返回 JSON 编码的数组，接收数组并解析它以便可以在 javaScript 中使用？答案

【问题标题】：How to return JSON encoded array, receive the array and parse it so it can be used in javaScript?如何返回 JSON 编码的数组，接收数组并解析它以便可以在 javaScript 中使用？
【发布时间】：2014-08-22 16:36:13
【问题描述】：

我的 PHP 找到了一堆图片的 url。我希望能够在应用程序上显示它们。我正在使用 AJAX 来检索返回的数组。然后我试图解析它并将其放入一个 javaScript 数组中。然后我想用我的构建图像功能从它的 URL 中显示第一张图像。目前没有显示图像。我不确定我的问题出在哪里，我认为数组没有被解析，我什至不确定它是否在 php 中正确返回。

下面是我的 PHP。使用 JSON 编码并尝试返回该路径数组。

<?php
include("mysqlconnect.php");
$select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC";
$sql = mysql_query($select_query) or die(mysql_error());   


$data = array();
while($row = mysql_fetch_array($sql,MYSQL_BOTH)){
$data[] = $row['ImagesPath'];
}

echo json_encode( $data );

?>

这是回显并希望返回的想法。

["http://server/~name/folder/images/07-08-2014-1407418088.png","http://server/~name/folder/images/05-08-2014-1407252096 .png"]

这是我使用 AJAX 获取该数组并将其解析为 JavaScript 数组的脚本。

      function importJson(str) {



            if (str=="") {
                document.getElementById("content").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            xmlhttp.onreadystatechange=function() {


            if (xmlhttp.readyState==4 && xmlhttp.status == 200){
                alert("onreadystatechange");
                var images = JSON.parse(xmlhttp.responseText);

                for (var i = 0; i < images.length; i++) {
                    buildImage(images[i]);
            }
            }
            }


            xmlhttp.open("GET","http://server/~name/folder/content.php");
            xmlhttp.send();

            buildImage=function(src) {
                var img = document.createElement('img');
                img.src = src;
                document.getElementById("content").appendChild(img);

            }
      }

    window.onload = importJson();

  </script>

第一张图片应该放在 div 内容中。

<body>
<div id="content"></div>
</body>

【问题讨论】：

JSON array javascript的可能重复
这里的问题是尝试将 PHP 更改为 JSON 并正确解析它。我认为输出 JSON 消息和接收有困难。解析也可能比该示例复杂得多。
我相信我正在发送或接收整个 php 脚本而不仅仅是数组？

标签： javascript php arrays ajax json

【解决方案1】：

看起来大多不错。您正在使用 json_encode 对数据进行编码，并使用 JSON.parse 在 JS 中对其进行解析。没错。

利用您的 Javascript 调试工具，例如 Chrome 的“开发者工具”。检查网络（网络）选项卡，以便 1. 确保 AJAX 请求正在由您的浏览器发送，2. 收到响应，以及 3. 响应数据的格式符合您的预期。

如果您收到的数据是正确的，那么您在解析 responseText 时出现了问题。拍打“调试器”；在那里排队并玩弄结果。

此外，您可能应该在 if 语句中添加一个 else 来检查响应。

 if (xmlhttp.readyState==4 && xmlhttp.status == 200){
    ...
 } else {
   alert("Error");
 }

否则，如果服务器返回无效响应，您的应用程序将静默失败。

【讨论】：

我在 for 循环下方的 if 语句中添加了 else 错误以创建图像，我收到三个错误警报。我假设的数组中的每个图像都有一个。我认为这意味着我没有正确解析数组。
实际上，我认为这表明请求-响应周期中有问题。每个警报将针对不同的就绪状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成，响应已准备好
我相信是的。 “警报（“onreadystatechange”）；”在我上面的代码中确实在三个错误消息后变为活动状态。
我也相信 importJson 函数中的第二个 if 语句有效，但不是第一个。
if (str=="") { document.getElementById("content").innerHTML=""; return; } 你的意思是那个 if 语句？你没有传入一个空字符串，所以它不会通过 (str == "")。