AJAX调用图像路径问题,将JSON消息转换为javaScript数组并尝试显示图像?

时间:2014-08-21 23:18:27

标签: javascript php ajax json cordova

尝试使用JSON消息和AJAX将PHP数组中的图像加载到javaScript数组中。使用函数buildImage()将数组中的第一个图像加载到div内容中。使用onclick将图像更改为阵列中的下一个图像。我是AJAX和JSON的新手。 JSON消息和javaScript数组之间的转换对我来说是主要问题。

PHP

<?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 $images = json_encode($data);

 ?>

这是客户端脚本

<script>
var images = JSON.parse(xmlhttp.responseText);

function importJson(str) {
    // console.log(typeof xmlhttp.responseText);

    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)
        {
            images = JSON.parse(xmlhttp.responseText);
            document.getElementById("content").innerHTML=images;
        }
    }

    xmlhttp.open("GET","http://content.php");
    xmlhttp.send();
}

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

for (var i = 0; i < images.length; i++) {
    buildImage(images[i]);
}
</script>
</head>
<body onload= "importJson();" onload= "buildImage();" >

    <div class="contents" id="content" onclick="buildImage()"></div>

 </body>

2 个答案:

答案 0 :(得分:1)

JSON.parse(xmlhttp.responseText)准备就绪之前致电xmlhttp.responseText

在响应准备就绪时调用它

if (xmlhttp.readyState==4)
{
   images = JSON.parse(xmlhttp.responseText);
   document.getElementById("content").innerHTML=images;
}

答案 1 :(得分:0)

AJAX是异步的。您必须解析JSON并在for函数

中运行onreadystatechange循环
<script>
function importJson(str) {
    // console.log(typeof xmlhttp.responseText);

    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)
        {
            images = JSON.parse(xmlhttp.responseText);
            for (var i = 0; i < images.length; i++) {
                buildImage(images[i]);
            }
        }
    }

    xmlhttp.open("GET","http:/content.php");
    xmlhttp.send();
}

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

</script>
</head>
<body onload= "importJson();" >

    <div class="contents" id="content" onclick="buildImage()"></div>

</body>