2011-01-12 22 views
0

SQLクエリ配列をJavaScript配列に戻して、一度に1つずつ情報を表示しようとしています。私はすでにここにいくつかの有益な記事を見つけましたが、私はまだそれを働かせることはできません。私はAJAXを初めて使っているので、愚かな間違いを許してください。以下はPHPの説明です。 PHP:これは、この結果(これらはファイルパスである)の配列とJSONはJavaScriptに渡すそれらをコード取得 PHP配列をJavascript配列に戻す

のindex.php
<?php 
include('connection.php'); 

$query = "SELECT * 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; 
?> 

から外部ファイルです。 Connection.phpは正しいもので、動作しています。

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> 

私はそれが理にかなって願っています。再度、感謝します!

+0

var newpath = "";変更ハンドラ内で..本当に混乱しているように見えます。 – Ben

+0

私はこのサイトの別の投稿からそれを得ました。私はそれが正しいかどうかわからないが、他の多くの方法を試して、他の何も動作していないようだ。アイデアを公開する。返信いただきありがとうございます! – Siriss

+0

私は、うまくいけばそれをよりよく説明するために、すべての提案を使用して自分のJavaScriptを更新しました。助けてくれてありがとう! – Siriss

答えて

7

json_encode()を使用してJSONとしてエンコードします。 最近のブラウザでは、その関数の文字列をvar obj = JSON.parse(yourstring);を使用してJavaScriptオブジェクトに変換することができます。 AJAXとJSON解析のためのjQuery。

更新:あなたのJavaScriptは、あなたのクエリからのデータを反復するためにそのようにlooke必要があります。

$.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; 
    }); 
}); 

しかし、それはあなたがやりたいことではないかもしれません:それは同じで、一度にほとんどすべての画像を描画しますポジション。

<script>imageload() </script>(JavaScriptを含む関数であると仮定します)を<script type="text/javascript">imageload();</script>と置き換えてください。正しい/正しい構文です。

PHPコードでは、何かを返すファイルに依存するフレームワークを使用していない限り、return $paths;echo $paths;に置き換える必要があります。さらに、JSONヘッダーを送信するとよいでしょう:header('Content-type: application/json');

PS:SELECT *MYSQL_NUMはBadThingです。これは、特定の順序を持​​つテーブルの列に依存しています。 1つの列だけが必要な場合は、 "SELECT columnName"を使用します。すべてが必要な場合は、MYSQL_ASSOCを使用して連想配列を取得します。

+0

私は同意します。私はまた、jQueryが明示的なインテント(インクリメンタルイメージディスプレイ)を他の方法ではるかに簡単にすることができるとも思っています。そして、なぜ新しいキャンバスが必要なのか不思議です。 –

+0

返事をありがとう。私は私のPHPでJSONを使っていると思っていました。私はそれが解析されるかもしれないことを知らなかった。私はそれを試みます。私はちょうどjqueryを学び始めたばかりですが、私が知っているものにデフォルトする傾向があります。可能であればjqueryでコードを更新しようとします。私はキャンバスを選んだのは、それが簡単で新しいものだからです。私はそれに固執していない。 – Siriss

+0

描画関連のものにキャンバスを使用すると、実際にはうまくいきます。 jQueryは、AJAXやDOMの操作に役立ちます。 jQueryとcanvasはまったく異なるものです。 – ThiefMaster

関連する問題