来自php的JSON数据无法输出

时间：2016-10-26 17:57:08

标签： javascript php jquery json ajax

我遇到了一个问题，即从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",…}

我收到的地方^^

enter image description here

enter image description here

1 个答案:

答案 0 :(得分：0)

小工作示例：

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>

相关问题
最新问题