Question

我正在创建一个电子商务网站。我遇到了在主页上显示图像的问题。所有相关数据均显示成功。唯一的图像无法显示。检查控制台时我没有出现任何错误。到目前为止，我尝试过的工作都附在下面。

Json **$("#Products").append("<img id='theImg' src='images/' + data[i].image + ' />'");**这是我编写的图像附加代码。

   function getProducts(){
        $.ajax({
            type: 'GET',
            url: 'all_product.php' ,
            dataType: 'JSON',
            success: function (data) {
                console.log(data);

                for (var i = 0; i < data.length; i++)
                {
                    $("#Products").append("<img id='theImg' src='images/'  + data[i].image  + ' />'");
                    $('#Products').append('<h5>' + data[i].description +  '</h5>');
                    $('#Products').append('<p>' + data[i].price +  '</p>');
                }
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    }

all_product.php

<?php
include("db.php");

$stmt = $conn->prepare("select id,cat_id,brand_id,price,description,image,keywords from products order by id DESC");
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);

if($stmt->execute())
{
    while($stmt->fetch())
    {
        $output[] = array("id"=>$id, "cat_id" =>$cat_id, "brand_id"=> $brand_id,"price"=> $price, "description"=> $description,
            "image"=> $image, "keywords"=> $keywords);
    }
    echo json_encode($output);
}

$stmt->close();
?>

设计

<div class="card" style="width: 18rem;" id="Products">
                    <img id="theImg">
                    <div class="card-body">
                        <h5></h5>
                        <p class="card-text"></p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
  </div>

Answer 1

您必须按以下方式更改代码。您缺少一个双qoutes，它使stirng变了。

$("#Products").append("<img id='theImg' src='images/"  + data[i].image  + "' class='your-css-class' />");

如何使用Json

1 个答案: