Javascript 图像不显示在json页面中_Javascript_Php_Json

Javascript 图像不显示在json页面中

javascript php json

Javascript 图像不显示在json页面中,javascript,php,json,Javascript,Php,Json,来自数据库的图像不会出现在json页面和html页面中，但会输出图像源名称。如何使图像显示在html页面上谢谢你宝贵的时间 linejson.php页面 <?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); $conn = new mysqli("localhost", "db_user", "db_pwd", "db_name")

来自数据库的图像不会出现在json页面和html页面中，但会输出图像源名称。如何使图像显示在html页面上

谢谢你宝贵的时间

linejson.php页面

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost", "db_user", "db_pwd", "db_name");

$result = $conn->query("SELECT tbl_users.image, tbl_users.firstname, tbl_users.lastname, tbl_users.username,    tbl_posts.post, tbl_posts.post_date
                    FROM tbl_posts INNER JOIN tbl_users ON  tbl_users.id=tbl_posts.user_id
                    WHERE tbl_posts.user_id=3");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}

$outp .= '{"Image":"'  . $rs["image"] . '",';
$outp .= '"Firstname":"'   . $rs["firstname"]     . '",';
$outp .= '"Lastname":"'  . $rs["lastname"] . '",';
$outp .= '"Username":"'   . $rs["username"]        . '",';
$outp .= '"Post":"'   . $rs["post"]        . '"}';

}
$outp .="]";

$conn->close();

echo($outp);
?>

linejson.html页面

<!DOCTYPE html>
<html>

<head>
<style>

 table, th , td  {
 border-top: 1px solid purple;
 border-collapse: collapse;
 padding: 15px;

}
table tr:nth-child(odd) {
background-color: #f0f1f1;

}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>

<body>
<div id="timeline"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.outpaceng.com/linejson.php";

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
  }
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";

for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" +
    arr[i].Image +
    "</td><td>" +
    arr[i].Firstname +
    "&nbsp;" +
    arr[i].Lastname +
    "&nbsp;" +
    arr[i].Username +
    "<br>" +
    arr[i].Post +
    "</td><tr>" ;

   }
   out += "</table>";
   document.getElementById("timeline").innerHTML = out;
 }
 </script>

</body>
 </html>


表，th，td{
边框顶部：1件纯色紫色；
边界塌陷：塌陷；
填充：15px；
}
表tr：第n个子项（奇数）{
背景色：#f0f1f1；
}
表tr：第n个子项（偶数）{
背景色：#ffffff；
}
var xmlhttp=new XMLHttpRequest（）；
变量url=”http://www.outpaceng.com/linejson.php";
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
myFunction（xmlhttp.responseText）；
}
}
open（“GET”，url，true）；
xmlhttp.send（）；
功能myFunction（响应）{
var arr=JSON.parse（响应）；
var i；
var out=“”；
对于（i=0；i”+
arr[i].邮政+
"" ;
}
out+=“”；
document.getElementById（“timeline”）.innerHTML=out；
}

代码可以sipmlified，您应该使用json_encode来创建json

改变这个

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}

$outp .= '{"Image":"'  . $rs["image"] . '",';
$outp .= '"Firstname":"'   . $rs["firstname"]     . '",';
$outp .= '"Lastname":"'  . $rs["lastname"] . '",';
$outp .= '"Username":"'   . $rs["username"]        . '",';
$outp .= '"Post":"'   . $rs["post"]        . '"}';

}
$outp .="]";

$conn->close();

echo($outp);

到

和JavaScript

for(i = 0; i < arr.length; i++) {
    out += "<tr><td><img src='" +
    arr[i].image +
    "' alt="img"/></td><td>" +
    arr[i].firstname +
    "&nbsp;" +
    arr[i].lastname +
    "&nbsp;" +
    arr[i].username +
    "<br>" +
    arr[i].post +
    "</td><tr>" ;
}

for（i=0；i”+
arr[i].邮政+
"" ;
}

为什么不使用创建JSONY您应该使用img tag抱歉，但是您可以使用

json\u encode

函数，例如

$rs=$result->fetch\u array（MYSQLI\u ASSOC）

和

json\u encode（$rs）

如果是这个数组，或者

json\u encode（interator\u to\u array（$rs））

如果是

$rs

interator，我不明白你在替换它并添加json_encode后的意思…它抛出了一个错误…预期为“[”或“{”。你认为问题出在哪里？你有语法错误，但我的代码没有任何语法问题，因此你需要检查每个数组和函数是否都已关闭或接近{[如果有错误：）

for(i = 0; i < arr.length; i++) {
    out += "<tr><td><img src='" +
    arr[i].image +
    "' alt="img"/></td><td>" +
    arr[i].firstname +
    "&nbsp;" +
    arr[i].lastname +
    "&nbsp;" +
    arr[i].username +
    "<br>" +
    arr[i].post +
    "</td><tr>" ;
}