Question

我有一个php文件，可以为我的图像和相应的文本创建一个json数组：

<?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);
    });
});
});

当我运行它时，我只会破坏图像链接。萤火虫表明：

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

提前感谢您的帮助！

哦，我已将图像移动到根目录，因此我从文件名中取出了“images /”。

为了回答我自己的问题，我在图片中添加了一个标题：

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

正下方：

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

我非常感谢本网站提供的帮助！感谢您！

Answer 1

行

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

应该是

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

修改

oops误读了它

换行val到val.image

Answer 2

应该是：

$.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"
}

Answer 3

你的网址'getProducts.php'不正确

也许它需要是'/getProducts.php'或者包含其他部分.. 从您的url删除域名部分...

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

404 Not found - 表示找不到您设置的页面..

如何使用jquery在php文件中显示json数组中的图像

3 个答案: