2016-07-04 162 views
-1

來自數據庫的圖像沒有出現在json頁面和html頁面中,但是圖像源名稱被輸出。我如何使圖像顯示在html頁面上?圖像沒有顯示在json頁面

謝謝你寶貴的時間。

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> 
+1

爲什麼不能用[json_encode()](http://php.net/manual/en/function.json-encode.php)創建JSON – Saty

+1

你應該使用img標籤 – Robert

回答

1

的代碼可以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); 

echo json_encode($result->fetch_all()); 
$conn->close(); 

和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>" ; 
} 
+0

對downvote感到抱歉,但是你可以用'json_encode'函數爲例如 '$ rs = $ result-> fetch_array(MYSQLI_ASSOC)'和'json_encode($ rs)'如果這個數組或者'json_encode interator_to_array($ rs))'如果'$ rs' interator。 – Naumov

+0

我使用它,我不明白你的意思 – Robert

+0

對不起,我是upvote。 – Naumov