Returning PHP array to Javascript array
I am trying to return my SQL query array into a javascript array and then display the info one at a time. I have found a few helpful posts already on here but I still cannot get it to work. I am new to ajax and so please forgive any stupid mistakes. Below is the php followed by a description. php: this is in an external file from index.php
<?php
include('connection.php');
$query = "SELEC开发者_JS百科T * FROM photos";
$queryresult = mysql_query($query);
while ( $line = mysql_fetch_array($result) ) {
$path[] = $row[0];
}
$paths = json_encode($path);
header('Content-type: application/json');
echo $paths;
?>
This gets the results (they are file paths) array and json encodes them to pass to javascript. Connection.php is correct and it is working.
HTML/Javascript:
<html>
<head>
<script src="JavaScript/gjs.js" type="text/javascript"></script>
<script src="jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script>
function imageload(){
var i = 1;
$.getJSON('phpfiles/getpiccode.php', function(data) {
var can = document.getElementById('canvas').getContext('2d');
$.each(data,function(idx, row){
var img = new Image();
img.onload = function(){
can.drawImage(img, 0, 0, 1280, 800);
}
img.src = row;
i++;
});
});
}
</script>
</head>
<body>
<div class="container">
<canvas id="canvas" class="canvas-one" width="1280" height="800">
<script>imageload();</script>This text is displayed if your browser does not support HTML5 Canvas</canvas>
</div>
</body>
</html>
I hope that makes sense. Thanks again!
Use json_encode() to encode it as JSON.
In recent browsers you can simply turn the string from that function into a JavaScript object using var obj = JSON.parse(yourstring); - but better use e.g. jQuery for AJAX and JSON parsing.
Update: Your JavaScript should looke like that to iterate over the data from your query:
$.getJSON('phpfiles/getpiccode.php', function(data) {
// get canvas object. it's the same for all images so only do it once
var can = document.getElementById('canvas').getContext('2d');
// iterate over the elements in data
$.each(data, function(idx, row) {
var img = new Image();
img.onload = function() {
can.drawImage(img, 0, 0, 1280, 800);
}
img.src = row;
});
});
However, it might not do what you want: It will draw all images pretty much at once at the same position.
Also replace <script>imageload() </script> (assuming that's the function containing your JavaScript) with <script type="text/javascript">imageload();</script> as that's the correct/proper syntax.
In your PHP code you'll have to replace return $paths; with echo $paths; unless you are using some framework which relies on your file returning something. Additionally it'd be good to send a JSON header: header('Content-type: application/json');
PS: SELECT * combined with MYSQL_NUM is a BadThing. It relies on the columns in the table having a certain order. If you just need one column use "SELECT columnName"; if you need all, use MYSQL_ASSOC to get an associative array.
加载中,请稍侯......
精彩评论