Question

我正在使用Laravel创建社交网站。我使用的是ajax，因此用户可以对动态数量的帖子发表评论。

我的问题是我不知道如何响应控制器中的ajax。我的控制台显示ajax返回整个页面。这导致在重新加载页面之前发布的新评论显示不正确。所以我添加了一个if语句来处理ajax，但我不知道如何处理它。

我的评论的视图就像这样。

<div class="comment-box-container ajax-refresh">
// COMMENTS ARE DISPLAYED HERE
  <div class="comment-box">
    @if ($type->comments)
      @foreach ($type->comments as $comment)

        <div class="user-comment-box">

          <div class="user-comment">
            <p class="comment">
<!-- starts off with users name in blue followed by their comment-->
              <span class="tag-user"><a href="{{ route('profile', $comment->owner->id) }}">{{ $comment->owner->first_name }}&nbsp;{{ $comment->owner->last_name }}</a>&nbsp;</span>{{ $comment->body }}
            </p>
<!-- Show when the user posted comments-->
          <div class="com-details">
            <div class="com-time-container">
              &nbsp;{{ $comment->created_at->diffForHumans() }} ·
            </div>
          </div>

        </div><!--user-comment end-->
      </div><!--user-comment-box end-->
    @endforeach
  @endif
// USER TYPES COMMENT HERE
<!--type box-->
  <div class="type-comment">
    <div class="type-box">
    {{ Form::open(['data-remote', 'route' => ['commentPost', $id], 'class' => 'comments_create-form']) }}
        {{ Form::hidden('user_id', $currentUser->id) }}
        {{ Form::hidden($idType, $id) }}
        {{--{{ Form::hidden('user_id', $currentUser->id) }}--}}
        {{ Form::textarea('body', null, ['class' =>'type-box d-light-solid-bg', 'placeholder' => 'Write a comment...', 'rows' => '1']) }}
    {{ Form::close() }}
    </div><!--type-box end-->
  </div><!--type-comment-->

</div><!--comment-box end-->

用户通过按＆＃34;输入/返回＆＃34;提交评论类型框的表单。键。这是 JS

<script>
    $(document).on('keydown', '.comments_create-form', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            $(this).submit();
        }
    });
</script>

我的 Ajax 看起来像这样：

(function(){

$(document).on('submit', 'form[data-remote]', function(e){
    e.preventDefault();
    var form = $(this)
    var target = form.closest('div.ajax-refresh');
    var method = form.find('input[name="_method"]').val() || 'POST';
    var url = form.prop('action');

    $.ajax({
        type: method,
        url: url,
        data: form.serialize(),
        success: function(data) {
            var tmp = $('<div>');
            tmp.html(data);
            target.html( tmp.find('.ajax-refresh').html() );
            target.find('.type-box').html( tmp.find('.type-box').html() );
            tmp.destroy();
            }
    });
});
})();

评论在 CommentsController 中处理。我的控制器看起来像这样：

路线

Route::post('post/{id}/comment', ['as' => 'commentPost', 'uses' => 'CommentsController@postComment']);

控制器

public function postComment()
 {
     extract(Input::only('user_id', 'resource_id', 'body'));
     $this->execute(new PostCommentCommand($user_id, $resource_id, $body));
     if(Request::ajax()){
        // NOT SURE WHAT TO PUT HERE???
     }
     return Redirect::back();
 }

我正在使用 Commandbus 。 PostCommentCommand是一个数据传输对象，最终使用handle()方法通过 PostCommentCommandHandler 进行处理：

public function handle($command)
{
    $comment = $this->postRepository->leaveComment($command->user_id, $command->resource_id, $command->body);

    return $comment;

}

postRepository->leaveComment()看起来像这样：

public function leaveComment($user_id, $resource_id, $body)
{
    $comment = Comment::leavePostComment($resource_id, $body);

    User::findOrFail($user_id)->comments()->save($comment);

    return $comment;
}

我不确定如何在我的控制器中完成这项工作。我知道我需要确定我是否使用ajax if(Request::ajax()){}但我不知道在那之后该怎么做。

我的主要目标是我尝试制作类似于facebook的评论系统。用户可以在任何页面上的任何帖子上发表评论，而无需重新加载页面。我希望将这个相同的ajax系统用于一个类似的系统＆＃39;所以用户可以在没有页面重新加载的情况下喜欢照片和评论。

有没有人对此有任何想法或解决方案？我是Laravel的新手，甚至是Ajax和JavaScript的新手。将非常感谢详细描述。谢谢！

Answer 1

根据您当前的代码，我将如何完成ajax请求：

1。为个别评论创建comment.blade.php部分视图：

<div class="user-comment-box">
    <div class="user-comment">
        <p class="comment">
            <span class="tag-user">
                <a href="{{ route('profile', $comment->owner->id) }}">
                    {{ $comment->owner->first_name }} {{ $comment->owner->last_name }}
                </a>
            </span>
            {{ $comment->body }}
        </p>
        <div class="com-details">
            <div class="com-time-container">
                &nbsp;{{ $comment->created_at->diffForHumans() }} ·
            </div>
        </div>
    </div>
</div>

2。在评论foreach循环中添加新评论视图：

<div class="comment-box-container ajax-refresh">
    <div class="comment-box">
        @if ($type->comments)
            @foreach ($type->comments as $comment)
                @include('comment')
            @endforeach
        @endif

        <div class="type-comment">
            <div class="type-box">
                {{ Form::open(['data-remote', 'route' => ['commentPost', $id], 'class' => 'comments_create-form']) }}
                    {{ Form::hidden('user_id', $currentUser->id) }}
                    {{ Form::hidden($idType, $id) }}
                    {{--{{ Form::hidden('user_id', $currentUser->id) }}--}}
                    {{ Form::textarea('body', null, ['class' =>'type-box d-light-solid-bg', 'placeholder' => 'Write a comment...', 'rows' => '1']) }}
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>

3。现在，在处理postComment方法的ajax请求时，您应该返回填充了新评论详细信息的commend.blade.php视图，如下所示：

public function postComment()
{
    extract(Input::only('user_id', 'resource_id', 'body'));

    // get the new comment model
    // (also the method here is "dispatch" not "execute")
    $comment = $this->dispatch(new PostCommentCommand($user_id, $resource_id, $body));

    if (Request::ajax())
    {
        // return the comment view you created earlier
        // passign the new comment model to it
        return view('comment', compact('comment'));
    }

    return Redirect::back();
 }

4. 在您的JavaScript AJAX成功回调中，您现在正在使用新评论获得HTML回复。您只需要在注释列表的末尾插入它，就在表单之前：

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function(response)
    {
        form.closest('.type-comment').before(response);
    }
});

关于它。

相同的逻辑可以应用于任何其他异步操作，根据每种情况都有很小的差异。例如＆＃34;喜欢＆＃34;注释，您发送一个AJAX请求，并且您可以从服务器回复JSON响应，该响应指定操作是否成功。 Laravel部分看起来像这样：

$liked = like_comment($id); // this is generic
return response()->json(['success' => $liked]);

在客户端，你有类似的东西：

success: function(response)
{
    if (response.success)
    {
        // update the necessary parts of the page
    }
}

如何在Laravel控制器中处理Ajax响应？

1 个答案: