[英]JSON data from php not outputting
我遇到一個問題,從php文件發送JSON數據到我的頁面輸出。 我要做的是創建一個評論系統,所以每當有人發表評論時,我的AJAX代碼都會獲得SELECT查詢結果並重新加載已經列出的評論,主要是為了顯示新的評論,無論是用戶發布還是其他人發表的評論。
我有三個文件,評論頁面,AJAX和PHP文件。 我最初在評論頁面上進行SELECT
查詢以獲取頁面加載的數據,然后我希望同一組評論一致地每三秒加載一次。
正如我在控制台中看到的那樣, setInterval()
正在運行並且正在發送JSON,但它實際上並沒有刷新和輸出。 另外,我真的只想在創建新注釋時重新加載注釋,而不是重新加載注釋重新加載。
有沒有人看到我做錯了JSON數據不輸出?
這是我最初在頁面加載上獲得輸出的方式。 這只是在評論頁面上使用php。
<div id="comment-container">
<?php
$select_comments_sql = "
SELECT c. *, p.user_id, p.img
FROM home_comments AS c
INNER JOIN (SELECT max(id) as id, user_id
FROM profile_img
GROUP BY user_id) PI
on PI.user_id = c.user_id
INNER JOIN profile_img p
on PI.user_id = p.user_id
and PI.id = p.id
ORDER BY c.id DESC
";
if ($select_comments_stmt = $con->prepare($select_comments_sql)) {
$select_comments_stmt->execute();
if (!$select_comments_stmt->errno) {
//echo "error";
}
$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img);
//var_dump($select_comments_stmt);
$comment_array = array();
while ($select_comments_stmt->fetch()) {
$comment_array[] = $comment_user_id;
$comment_array[] = $comment_username;
$comment_array[] = $home_comments;
$comment_array[] = $comment_date;
$comment_array[] = $commenter_user_id;
$comment_array[] = $commenter_img;
$commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">';
if ($home_comments === NULL) {
echo 'No comments found.';
} else {
echo '<div class="comment-post-box" id="comment-'. $comment_id .'">';
//echo '<div class="comment-post-box" id="comment-'.$row['id'].'">';
echo $commenter_img;
echo '<div class="comment-post-username">'.$comment_username. '</div>';
echo '<div>'.$comment_date. '</div>';
echo '<div class="comment-post-text">'.$home_comments. '</div>';
echo '</div>';
}
}
}
?>
</div>
要從home_comments表中選擇PHP並回顯JSON
$user = new User();
//Get the last insert id
$select_comments_sql = "
SELECT c. *, p.user_id, p.img
FROM home_comments AS c
INNER JOIN (SELECT max(id) as id, user_id
FROM profile_img
GROUP BY user_id) PI
on PI.user_id = c.user_id
INNER JOIN profile_img p
on PI.user_id = p.user_id
and PI.id = p.id
ORDER BY c.id DESC
";
if ($select_comments_stmt = $con->prepare($select_comments_sql)) {
//$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$select_comments_stmt->execute();
$rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC);
$comments = array();
foreach ($rows as $row) {
$html = "";
//$html .= '<div class="comment-post-box">';
$html .= '<div class="comment-post-box" id="comment-'.$row['id'].'">';
$html .= '<img class="home-comment-profile-pic" src="'.$row['img'].'">';
$html .= '<div class="comment-post-username">'.$row['username']. '</div>';
$html .= '<div>'.$row['date']. '</div>';
$html .= '<div class="comment-post-text">'.$row['comment']. '</div>';
$html .= '</div>';
$data = array('id' => $row['id'], 'date' => $row['date'], 'html' => $html);
$comments[] = $data;
}
}
echo json_encode($comments);
然后我的AJAX嘗試刷新評論列表:
function commentRetrieve(){
$.ajax({
url: "ajax-php/comment-retrieve.php",
type: "get",
success: function (data) {
//console.log(data);
if (data == "Error!") {
alert("Unable to retrieve comment!");
alert(data);
} else {
var array = JSON.parse(data);
console.log(data);
$(array).each(function(this) {
if($('#comment-' + this.id).length == 0) {
$('#comment-container').prepend(this.html);
console.log(this.html);
}
});
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
console.log("error"); //otherwise error if status code is other than 200.
}
});
}
setInterval(commentRetrieve, 3000);
編輯:發送的數據
[{id: "51", date: "2016-10-26 09:25:42",…}, {id: "22", date: "0000-00-00 00:00:00",…},…]
0
:
{id: "51", date: "2016-10-26 09:25:42",…}
1
:
{id: "22", date: "0000-00-00 00:00:00",…}
2
:
{id: "21", date: "0000-00-00 00:00:00",…}
3
:
{id: "20", date: "0000-00-00 00:00:00",…}
4
:
{id: "19", date: "2016-10-23 09:56:08",…}
5
:
{id: "18", date: "2016-10-21 09:51:35",…}
6
:
{id: "16", date: "2016-10-20 14:41:10",…}
7
:
{id: "15", date: "2016-10-20 13:23:30",…}
8
:
{id: "12", date: "2016-10-20 09:10:28",…}
9
:
{id: "11", date: "2016-10-19 23:54:58",…}
10
:
{id: "10", date: "2016-10-19 23:41:52",…}
11
:
{id: "9", date: "2016-10-19 23:41:52",…}
12
:
{id: "8", date: "2016-10-19 23:41:16",…}
我收到的地方^^
小工作實例:
var count = 0; var RETRIEVE_INTERVAL = 1000; var datas = [ '[{"id": "51", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-51\\\\">51</div>"}]' , '[{"id": "22", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-22\\\\">22</div>"}]' , '[{"id": "5", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-5\\\\">5</div>"}]' , '[{"id": "34", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-34\\\\">34</div>"}]' , '[{"id": "51", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-51\\\\">51</div>"}]' , '[{"id": "10", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-10\\\\">10</div>"}]' , '[{"id": "70", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-51\\\\">70</div>"}]' , '[{"id": "22", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-22\\\\">22</div>"}]' , '[{"id": "40", "date": "2016-10-26 09:25:42", "html": "<div id=\\\\"comment-40\\\\">40</div>"}]' ]; function commentRetrieve(){ // mock data retrieval if (count == datas.length) return; var data = datas[count++]; var array = JSON.parse(data); $(array).each(function() { if($('#comment-' + this.id).length == 0) { $('#comment-container').prepend(this.html); } }); setInterval(commentRetrieve, RETRIEVE_INTERVAL); } $(commentRetrieve);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="comment-container" id="intro-box"> <div id="comment-5">5</div> <div id="comment-10">10</div> </div> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.