0

画像と対応するテキストの json 配列を作成する php ファイルがあります。

<?php
$images = array(
"Image 1" => array("name" => "Image 1", 
            "price" => "$299", 
            "desc" => "Description 1",
            "image" =>"images/image1.jpg"),
"Image 2"   => array("name" => "Image 2", 
            "price" => "$199", 
            "desc" => "Description 2",
            "image" => "images/image2.jpg"),
"Image 6"   => array("name" => "Image 6", 
            "price" => "$199", 
            "desc" => "Description 6",
            "image" => "images/image6.jpg")
);

echo json_encode($images);

私のjQuery関数は次のようになります。

$(document).ready(function(){
var $div = $("#thumbs");
$.getJSON('getProducts.php', function(data) {
    jQuery.each(data, function(key, val){
        $("<img />").attr("src", val).appendTo($div);
    });
});
});

これを実行すると、壊れた画像リンクしか表示されません。Firebug ショー:

"NetworkError: 404 Not Found - http://localhost/wpdhw8/%5Bobject%20Object%5D"

よろしくお願いします。

ああ、画像をルートに移動したので、ファイル名から「images/」を取り出しました。

そして、私自身の質問に答えるために、次の行を追加して画像にキャプションを追加しました。

$($div).append('<p>' + val.name + '</p>');

直下：

$("<img />").attr("src", val.image).appendTo($div);

このサイトのヘルプに本当に感謝しています! ありがとうございました！

4

3 に答える 3

1

この線

$("<img />").attr("src", val).appendTo($div);

する必要があります

$div.append('<img src="'+val+'" />');

編集

おっと読み間違えた

いずれかの行を次のように変更valしますval.image

于 2012-10-25T06:48:23.600 に答える
1

そのはず：

$.getJSON('getProducts.php', function(data) {
    jQuery.each(data, function(key, val){
        $("<img />").attr("src", val.image).appendTo($div);
    });
});

それぞれvalは次のようなオブジェクトです。

{ name: "Image 1",
  price: "$299",
  desc: "Description 1",
  image: "images/image1.jpg"
}
于 2012-10-25T06:53:22.813 に答える
0

URL「getProducts.php」が正しくありません

おそらく、「/getProducts.php」である必要があるか、その中に他の部分が必要です.. URLからドメイン部分を削除する方法...

http://localhost.local/getProducts.php => /getProducts.php

404 Not found - 設定したページが見つからないことを意味します..

于 2012-10-25T06:46:34.437 に答える