JavaScript/AJAX 打印异常

Question

我的 JavaScript/AJAX 打印评论。一切都很好，直到我想插入/获得多个评论。它复制自己。这感觉像是我的代码中的嵌套/遗漏括号问题，但我无法找到它...

我的 JS 代码:

$(document).ready(function(){

    var url = 'comment-get.inc.php';

    $.getJSON(url, function(data) {
        $.each(data, function(index, item) {
        var t = '';
        t += '<div class="comment_holder" id="_'+item.id+'">';
        t += '<div class="user"> <img src="src/img/page3_img7.jpg" alt="" class="img_inner fleft">';
        t += '<div class="extra_wrapper">';
        t += ''+item.username+'<br>';
        t += ''+item.date+'<br>';
        t += '<button class="button2" type="button" id="'+item.id+'">Delete</button>';
        t += '</div></div>';
        t += ''+item.message+'<br><br>';
        t += '</div>';
        $('.comment_holder').prepend(t);
        add_delete_handlers();
        });
    });

    add_delete_handlers();

    $('#postButton').click(function(){
        comment_post_btn_click();
});

function comment_post_btn_click()
{
    //text in textarea with username, page and date
    var _username = $('#postUsername').val();
    var _page = $('#postPage').val();
    var _date = $('#postDate').val();
    var _message = $('#postMessage').val();

    if(_message.length > 0)
        {
            //proceed with ajax callback
            $('#postMessage').css('border', '1px solid #ABABAB');
            $.post("comment-set.inc.php",
                {
                    task : "comment-set",
                    username : _username,
                    page : _page,
                    date : _date,
                    message : _message
                }
                ).success(
                    function(data)
                    {
                        //Task: Insert html into the div
                        comment_set(jQuery.parseJSON(data));
                        console.log("ResponseText: " + data);
                    });
        }
    else
        {
            //text in area is empty
            $('#postMessage').css('border', '1px solid #FF0000');
            console.log("Comment is empty");
        }
    //remove text after posting
    $('#postMessage').val("");
}

function add_delete_handlers()
{
    $('.button2').each(function()
    {
        var btn = this;
        $(btn).click(function()
        {
            comment_delete(btn.id);
        });
    });
}

function comment_delete(_id)
{
    $.post("comment-del.inc.php",
        {
            task : "comment-del",
            id : _id
        }
        ).success( 
            function(data)
            {
                $('#_' + _id).detach();
            });
}

function comment_set(data)
{
    var t = '';
    t += '<div class="comment_holder" id="_'+data.comment.id+'">';
    t += '<div class="user"> <img src="src/img/page3_img7.jpg" alt="" class="img_inner fleft">';
    t += '<div class="extra_wrapper">';
    t += ''+data.comment.username+'<br>';
    t += ''+data.comment.date+'<br>';
    t += '<button class="button2" type="button" id="'+data.comment.id+'">Delete</button>';
    t += '</div></div>';
    t += ''+data.comment.message+'<br><br>';
    t += '</div>';

    $('.comment_holder').prepend(t);
    add_delete_handlers();
}
});

评论.php:

<?php

class Comments {

    public function set($message, $username, $date, $page) {
        $connect = mysqli_connect('localhost', 'root', '', 'trdb');
        $sql = "INSERT INTO comments VALUES ('', '$username', '$page', '$date', '$message')";
        $query = mysqli_query($connect, $sql);

        if($query){ 
            $std = new stdClass();
            $std->id = mysqli_insert_id($connect);
            $std->message = $message;
            $std->username = $username;
            $std->date = $date;
            $std->page = $page;

            return $std;
        }

        return null;
    }

    public function del($id) {
        $connect = mysqli_connect('localhost', 'root', '', 'trdb');
        $sql = "DELETE FROM comments WHERE id = $id";
        $query = mysqli_query($connect, $sql);

        if($query)
        {
            return true;
        }
    }
}
?>

评论-get.inc.php:

<?php
$page = htmlentities("/index.php?page=maplepancakes", ENT_QUOTES);

$connect = mysqli_connect('localhost', 'root', '', 'trdb');
$sql = "SELECT * FROM comments WHERE page='$page' ORDER BY id DESC";
$result = $connect->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
    $row_data = array(
    'id' => $row['id'],
    'username' => $row['username'],
    'date' => $row['date'],
    'message' => $row['message']
    );
    array_push($data, $row_data);
    }
?>

<?php
echo json_encode($data);
?>

评论-set.inc.php:

<?php

if(isset($_POST['task']) && $_POST['task'] == 'comment-set'){
    $username = $_POST['username'];
    $date = $_POST['date'];
    $page = $_POST['page'];
    $message = $_POST['message'];

    require_once 'comments.php';

    if(class_exists('Comments')){
        $userInfo = $username;
        $commentInfo = Comments::set($message, $username, $date, $page);

        $std = new stdClass();
        $std->user = $userInfo;
        $std->comment = $commentInfo;
        echo json_encode($std);
    }
}
?>

问题图片(图片底部的json_encode包含3条评论):

Answer 1

您的评论 div 容器具有 .comment_holder 类，因此每次使用新评论时，您都将添加到所有类的前面，因此创建具有唯一 ID 的评论容器并添加到此。像这样 $('#comment_container').prepend(t); 这与工作。