php 为什么我在AJAX中提交后得到双重回复?

piv4azn7  于 4个月前  发布在  PHP
关注(0)|答案(1)|浏览(43)

我试图做一个评论回复系统为我的博客.评论工作良好.当我按下第一次回复按钮,它正常工作.如果我按下第二次它加倍我的第二条评论的回复.然而,这是不发生当我刷新页面提交下一个回复之前.


的数据

$(document).ready(function () {
    // When user clicks on submit comment to add comment under post
    $(document).on('click', '#submit_comment', function (e) {
        e.preventDefault();
        var comment_text = $('#comment_text').val();
        var url = $('#comment_form').attr('action');
        // Stop executing if not value is entered
        if (comment_text === "") return;
        $.ajax({
            url: url,
            type: "POST",
            data: {
                comment_text: comment_text,
                comment_posted: 1
            },
            success: function (data) {
                var response = JSON.parse(data);
                if (data === "error") {
                    alert('There was an error adding comment. Please try again');
                } else {
                    $('#comments-wrapper').prepend(response.comment)
                    $('#comments_count').text(response.comments_count);
                    $('#comment_text').val('');
                }
            }
        });
    });
    // When user clicks on submit reply to add reply under comment
    $(document).on('click', '.reply-btn', function (e) {
        e.preventDefault();
        // Get the comment id from the reply button's data-id attribute
        var comment_id = $(this).data('id');
        // show/hide the appropriate reply form (from the reply-btn (this), go to the parent element (comment-details)
        // and then its siblings which is a form element with id comment_reply_form_ + comment_id)
        $(this).parent().siblings('form#comment_reply_form_' + comment_id).toggle(500);
        $(document).on('click', '.submit-reply', function (e) {
            e.preventDefault();
            // elements
            var reply_textarea = $(this).siblings('textarea'); // reply textarea element
            var reply_text = $(this).siblings('textarea').val();
            var url = $(this).parent().attr('action');
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    comment_id: comment_id,
                    reply_text: reply_text,
                    reply_posted: 1
                },
                success: function (data) {
                    if (data === "error") {
                        alert('There was an error adding reply. Please try again');
                    } else {
                        $('.replies_wrapper_' + comment_id).append(data);
                        reply_textarea.val('');
                    }
                }
            });
        });
    });
});

字符串
我试图在mysql中修改我的数据库,第一次我担心它有什么问题。一切都很好。这里是我的回复系统的代码:

// If the user clicked submit on reply form...
if (isset($_POST['reply_posted'])) {
        global $conn;
        // grab the reply that was submitted through Ajax call
        $reply_text = $_POST['reply_text']; 
        $comment_id = $_POST['comment_id']; 
        // insert reply into database
        $sql = "INSERT INTO replies (user_id, comment_id, body, created_at, updated_at) VALUES (" . $user_id . ", $comment_id, '$reply_text', now(), null)";
        $result = mysqli_query($conn, $sql);
        $inserted_id = $conn->insert_id;
        $res = mysqli_query($conn, "SELECT * FROM replies WHERE id=$inserted_id");
        $inserted_reply = mysqli_fetch_assoc($res);
        // if insert was successful, get that same reply from the database and return it
        if ($result) {
                $reply = "<div class='comment reply clearfix'>
                                        <img src='profile.png' alt='' class='profile_pic'>
                                        <div class='comment-details'>
                                                <span class='comment-name'>" . getUsernameById($inserted_reply['user_id']) . "</span>
                                                <span class='comment-date'>" . date('F j, Y ', strtotime($inserted_reply['created_at'])) . "</span>
                                                <p>" . $inserted_reply['body'] . "</p>
                                                <a class='reply-btn' href='#'>reply</a>
                                        </div>
                                </div>";
                echo $reply;
                exit();
        } else {
                echo "error";
                exit();
        }
}

px9o7tmv

px9o7tmv1#

在提供的代码中,每次用户单击类为“. reply-btn”的元素时,一个新的点击事件处理程序为元素与类'.submit-reply'被附加.这不是一个好的做法,因为它可能导致意外的行为.像如果你点击回复按钮超过一个然后当你点击提交它将提交多少次你点击'. reply-btn'.(页面刷新后)。如下例所示,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $('.reply').click(function(){
    $('.submit').click(function(){
        alert('hi');
        })
        
  
  } 
  )
  
 
});
</script>
</head>
<body>
<button type="button" class="reply">Reply</button>
<button type="button" class="submit">Submit</button>
</body>

字符串

相关问题