Question

这太奇怪了，我不得不记录一个gif并附上我的解释，以便我可以更清楚地呈现它。

现在这是我对使用此gif的步骤的解释。

我创建3条分别称为“第一”，“第二”和“第三”的评论。
我刷新了phpMyAdmin，因此您可以看到它们实际上是创建的。
我检查了它们的隐藏输入值，因此我们可以确认它们是否成立正确的ID和相应的ID。
然后，我删除“ Third”注释并刷新数据库，以便您可以看到正确的评论已被删除。
这是问题开始的地方。我点击删除“第一”评论在我的页面上，看起来我实际上已经删除了“第一” 但是，在数据库中，我们可以看到实际上 “第二条”评论已删除，并且第一条评论仍留在那里。
最后，当我尝试删除页面上的“第二”评论时，控制台中的服务器错误。错误是我正在尝试删除一个不存在的记录。
同时，数据库中仍然存在注释“ First”。

我要删除的表格：

<form method='POST' action=''>
    <input type="hidden" name="comment_id" value="{{ $comment->id }}">
    {{ csrf_field() }}
    {{ method_field('delete') }}
    <button class='submit-btn delete-comment' type='submit' name='commentDelete'>X</button>
</form>

JavaScript Ajax：

$('.delete-comment').on('click', function(event) {
    event.preventDefault();

    var button = $(this);
    var flexbox = button.parents().eq(2);
    var commentId = $("input[name=comment_id]").val();

    $.ajax({
        method: 'POST',
        url: urlDeleteComment,
        data: {
            commentId: commentId,
            _method: 'delete',
            _token: token
        }
    }).done(function(response) {
        flexbox.remove();
    })
});

注释删除功能：

public function deleteComment(Request $request){
    $commentId = $request['commentId'];
    $comment = Comment::find($commentId);
    $comment->delete();
}

自从我考虑了很长时间以来，我一直没有找到我的问题所在。

Answer 1

我建议不要将每个删除按钮呈现为单个表单，而是建议使用单个AJAX函数来接受一个值，该函数由带有数据值的按钮（而不是表单提交）触发。例如

<button class="btn-delete" data-id="{{ $comment->id }}">Delete</button>

您不需要表单，隐藏字段或CSRF令牌。 AJAX处理其余的事情。

$('.btn-delete').on('click', function() {

    var id = $(this).data('id'); // Gets the value from the data-id field

    $.ajax({
        url: urlDeleteComment,   // I'm assuming you already have this set somewhere
        method: 'POST',
        data: 'comment_id='+id,
        success: function(response) {
            // ...
        },
        error: function(xhr) {
            // ...
        }
    });

});

这将向服务器发送一个请求，其中包含按下的按钮的推荐ID。

我还建议您使用成功/错误功能，以便您处理删除失败的情况。（例如评论已被删除，或者您没有删除此评论的权限。）

对于服务器端代码本身，您可以照原样处理。如果一切顺利，我建议您返回200或出现4xx / 5xx错误，以便在出现任何错误时触发AJAX错误功能。

关于实际的屏幕删除。我建议将注释包装在div中，其ID应与删除按钮上的ID相匹配。例如：

<div class="comment" data-comment="{{ $comment->id}}">
    <!-- Your comment here -->
    <button class="btn-delete" data-id="{{ $comment->id }}">Delete</button>
</div>

因此，当您要从屏幕上删除注释时，请在AJAX成功回调中进行：

// ...
success: function(response) {
    $('.comment[data-comment="' + id + '"]').slideUp();
}
// ...

之所以我建议使用替代方法而不是尝试解决当前方法（可能）的原因是，每次显示表单时，呈现表单都会涉及很多额外的工作/垃圾按钮。

使用通用的AJAX调用来接受来自按钮按下的参数通常是构建这些样式的应用程序的首选方法，因为它减少了不仅要首先构建它，而且还要将其维护在其中的大量工作。长期的。

关于评论删除的怪异错误。第一次删除正常，第二个删除错误的评论

1 个答案: