如何返回JSON编码数组,接收数组并解析它以便在javaScript中使用?

时间:2014-08-22 16:36:13

标签: javascript php arrays ajax json

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

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

<?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 );

?>

这是一个回应和希望返回的想法。

[&#34; HTTP://server/~name/folder/images/07-08-2014-1407418088.png",&#34; HTTP://服务器/〜名/文件夹/图像/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>

1 个答案:

答案 0 :(得分:0)

看起来很不错。您使用json_encode对数据进行编码,并使用JSON.parse在JS中对其进行解析。这是对的。

利用您的Javascript调试工具,例如Chrome&#34;开发人员工具&#34;。检查网络(网络)选项卡,以便1.确保浏览器发送AJAX请求,2。收到响应,3。响应数据的格式与预期的一样。

如果您正在接收数据并且它是正确的,那么您在解析responseText时会发生一些事情。拍打&#34;调试器;&#34;在那里划线并播放结果。

此外,您应该在检查响应的if语句中添加else。

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

否则,如果服务器返回无效响应,您的应用程序将无声地失败。