My PHP finds a bunch of urls for images. I want to be able to display them on an app. I'm using AJAX to retrieve the returned array. Then I'm trying to parse it and put it into a javaScript array. Then I want to display the first image from it's URL with my build image function. Currently no images are displayed. I'm not sure where my issue is, I don't think the array is being parsed and I'm not even sure if it's returning correctly in the php.
Below is my PHP. Using JSON ecode and trying to return that array of paths.
<?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 );
?>
This is a idea of what is echoed and hopefully returned.
["http://server/~name/folder/images/07-08-2014-1407418088.png","http://server/~name/folder/images/05-08-2014-1407252096.png"]
This is my script using AJAX to take that array and parse it into an javaScript array.
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>
The first image should be placed in the div contents.
<body>
<div id="content"></div>
</body>
-
possible duplicate of JSON array javascriptmsanford– msanford2014年08月22日 16:38:41 +00:00Commented Aug 22, 2014 at 16:38
-
The issue here, is trying to change PHP to a JSON and parse it correctly. I'm having difficulty i think with outputting the JSON message and receiving. Parsing maybe also but much more complex than that example.MichaelF– MichaelF2014年08月22日 16:47:08 +00:00Commented Aug 22, 2014 at 16:47
-
I believe I'm sending or receiving the whole php script instead of just the array?MichaelF– MichaelF2014年08月22日 17:55:24 +00:00Commented Aug 22, 2014 at 17:55
1 Answer 1
It looks mostly good. You're encoding the data with json_encode and parsing it in JS with JSON.parse. That's correct.
Take advantage of your Javascript debugging tools like Chrome's "Developer Tools". Check the network(Net) tab in order to 1. make sure the AJAX request is being sent by your browser, 2. The response is received, and 3. the response data is formatted the way you expect it to be.
If you're receiving the data and it's correct, then something is going on in your parsing of the responseText. Slap a "debugger;" line in there and play with the result.
Also, you should probably add an else to the if statement checking the response.
if (xmlhttp.readyState==4 && xmlhttp.status == 200){
...
} else {
alert("Error");
}
Otherwise your app would silently fail if the server returns an invalid response.
14 Comments
if (str=="") { document.getElementById("content").innerHTML=""; return; } That if statement you mean? You're not passing in an empty string so it's not going to pass (str == "").