javascript - 如何使用ajax将数据附加到特定帖子？

Question

摘要:

我有一个帖子列表，每个帖子还包含其中的评论列表。我可以选择直接在帖子上添加评论(很像 Twitter)。我通过 ajax 提交这些帖子。

问题:

提交新评论时，会更新每篇帖子的所有“评论列表”，而不仅仅是我提交的帖子。

有什么想法吗？ (代码如下)

JS:

$(document).ready(function () {
    var options = {
        //clearForm: true,
        //resetForm: true,
        //beforeSubmit: ShowRequest,
        success: function (html) {
            $('.post_comment_list').prepend(html);

            $('.footer-post').hide();
            $('.comments-feed').hide();
            $('.small-textarea-main-feed').removeClass('set-large');
            resetForm($('.footer-comment'));
        },
        error: function () {
            alert('ERROR: unable to upload files');
        },
        complete: function () {

        },
    };

    $(".footer-comment").ajaxForm(options);

    function ShowRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
        return true;
    }

    function resetForm($form) {
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        $form.find('input:radio, input:checkbox')
            .removeAttr('checked').removeAttr('selected');
    }
});

PHP

       <?php 
     if (empty($_POST) === false && empty($errors) === true) {
      //register user
         $post_comment = array(
        'comment'      => $_POST['comment'],
        'id'      => $_POST['id'],
         );


        $user_id = $_SESSION['user_id'];
        post_comment_db($user_id, $post_comment);
        //print_r($post_question['tags']);
        load_comment($user_id,$post_comment);



        } else{
          echo output_errors($errors);
         }
           ?>

PHP/HTML:Li(待添加的注释)

            function load_comment($user_id,$post_comment){


          $username = mysql_result(mysql_query("SELECT `username` FROM `users` WHERE `user_id` = $user_id"), 0, 'username');
          $timestamp = mysql_result(mysql_query("SELECT `timestamp` FROM `comments` WHERE `user_id` = $user_id"), 0, 'timestamp');
           $r = format_time($timestamp);

          $question_id = $post_comment['id'];

           $q = "SELECT `comment_id` FROM `question_has_comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;
           $q = "SELECT `comment_id` FROM `comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;


          echo 
           '                
    <li id="" class="post_comment">                                     
        <!--  wrapper da imagem -->
        <div id="" class="give-margin">
            <div id="" class="profile-page-avatar-wrapper"> 
                <a href="#"><img id="" class="profile-page-avatar-image" src="./images/test/chemistry.jpg" alt=""></a><!--  A imagem -->
            </div>
            <!--  o botao e o texto-->

            <div id="" class="profile-page-uploader-tools"> 
                <!--  o botao -->
                <div id="" class="profile-image-btn">
                    <div id="" class="profile-page-btn-wrapper">
                        <div id="" class="header-id">
                            <a href="#"><span id="user-name">' . $username . '</span></a>   
                        </div>
                        <div id="" class="question-page-feed-answer-header-timer">
                            <a id="feed-answer-header-timer" href="#"><span class="timer" data-time="">' . $r . '</span></a>
                        </div>
                    </div> <!-- fecha Div wrapper do botao-->
                </div> 
                <!--  fecha botao 
                http://www.w3.org/TR/html-markup/Overview.html#toc-->
                <p>' . $post_comment['comment'] . '</p>
            </div>                                  
        </div>
    </li>';

}

Answer 1

您的最新评论回复指出了问题:

“post_comment_list”类是所有帖子中都存在的“ol”，其中包含对帖子的评论

来自 API:

.prepend(): Description :将参数指定的内容插入到匹配元素集中每个元素的开头。

在您的代码中，ajax 成功函数会在返回的 HTML 前面添加如下内容:

$('.post_comment_list').prepend(html);

由于 $('.post_comment_list') 是具有类 .post_comment_list 的所有元素的集合，并且由于每个帖子都有该类，因此您的 HTML 将被添加到每一篇文章。

要解决此问题，请为每个帖子分配一个唯一的 ID，并在成功函数中仅将 HTML 添加到该 ID 的前面。

要获取该 ID，您可以在进行 ajax 调用时获取它，并且:

1. 将 ID 分配给全局变量并在 success fn 中再次获取它，或者
2. 将 ID 与其他 ajax 数据一起发送，然后将其与 HTML 一起发送回 success fn。例如:

PHP 端:

$post_id = $_POST['postid'];

$send_back = $post_id . '|' . '<li id="" class="post_comment">                                     
    <!--  wrapper da imagem -->
    <div id="" class="give-margin">
    etc
    ';
echo $send_back

jQuery/javascript:(成功内部:函数)

    var arrHTML = html.split('|');
    var postId = arrHTML[0];
    var html_code = arrHTML[1];

    $('#'+postId).prepend(html_code);

---

请注意，上面我没有演示将帖子 ID 发送到 PHP 端。我相信你对此没意见。只是展示了足够的内容来解释我的建议。