Question

我试图在应用程序中发布评论，而不必重新加载页面。我已经可以删除评论，但是不能发布新评论。有人可以帮忙吗？

Ajax请求脚本


// Add comments AJAX
$(".commentButton").click(function(){
    var id = $(this).data("id");
    var comment = $("input[name=comment]").val();
    var token = $(this).data("token");

    $.ajax({
       url: "/comments/"+id,
       type: 'POST',
       dataType: 'JSON',
       data: {
           "id": id,
           "comment": comment,
           "_method": 'POST',
           "_token": token,
       },

       success: function(){
        $("#comment_"+id).append(comment);
           console.log('it works!');
       } 
    });
    console.log("It failed");
});

CommentController


  public function store(Request $request, $recipe_id)
    {
        $this->validate($request, array(
            'comment' => 'required|min:5|max:2000'
        ));

        $recipe = Recipe::find($recipe_id);

        $comment = new Comment();
        $comment->name = auth()->user()->name;
        $comment->email = auth()->user()->email;
        $comment->comment = $request->comment;
        $comment->recipe()->associate($recipe); //I have relationship between 
        $comment->save();

        return $comment;

在其中呈现注释的刀片视图


<div class="col-12 currentComments">
                            <hr>
                        @foreach($recipe->comments as $comment)
                            <div id="comment_{{ $comment->id }}">
                                @if($comment->name == Auth()->user()->name)
                                    <p><a href="/user/{{$comment->name}}">{{$comment->name}}</a></p>
                                    <p class="comment">{{$comment->comment}}</p>
                                    <button class="deleteComment" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Comment</button>
                                @else
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

这要去哪里？我知道我缺少了一些东西，但是我不知道需要做什么。对此还算陌生。原谅我的无知。

Answer 1

我想您应该使用ajax来查看评论。您可以尝试以下类似方法。我希望它可以帮助您在保存新评论后无需页面刷新的情况下重新加载评论。在您的blade文件中-

<div class="col-12 currentComments">
  <hr>
  <div id="allComments" class="allComments">
       <!--here your comments will render via ajax call-->
  </div>
  <input type="hidden" id="authuser" value="{{ Auth()->user()->name }}">      
</div>

在您的script中，您可以尝试--

<script>
    $(document).ready(function () {
        comment_load();
        function comment_loadad()
        {
          $.ajax({
              url: '/get-comment-list',
              type: 'GET',
              success: function (response) {
                  var authuser = $("#authuser").val();
                  $.each(response, function (i, data) {
                    $('.allComments').append(
                          '<div id="comment_"'+ data.id + '>' +
                           (data.name == authuser ? 
                               '<p><a href="/user/'+data.name+'">' +data.name +'</a></p>' +
                               '<p class="comment">'+data.comment+'</p>' +
                               '<button class="deleteComment" data-id="'+data.id+'">Delete Comment</button>'
                                : '') 
                          +'</div>');
                    });

                },
                error: function (data) {
                    //console.log(data);
                }
            });
        }
    }

以及您的// Add comments AJAX成功方法，请再次执行append-

success: function(data){                        
           var authuser = $("#authuser").val();
           $('.allComments').append(
                 '<div id="comment_"'+ data.id + '>' +
                   (data.name == authuser ? 
                   '<p><a href="/user/'+data.name+'">' +data.name +'</a></p>' +
                   '<p class="comment">'+data.comment+'</p>' +
                   '<button class="deleteComment" data-id="'+data.id+'">Delete Comment</button>'
                                : '') 
                 +'</div>');
           )
          $("input[name=comment]").val("");

 }

Laravel 5.8使用ajax请求发表评论而无需重新加载DOM

1 个答案: