javascript - Ajax 成功后，重新加载部分页面，而不是整个页面。拉维尔

Question

我在我的项目中使用 Laravel 4。我有一个帖子的“新闻源”。每个帖子都可以评论。当用户对帖子发表评论时，页面会重新加载，并且新评论会显示在评论框中。然而我不想重新加载整个页面。所以，我可以使用 ajax 提交帖子。我提交表单并阻止页面刷新。但是，现在我不知道如何在不手动刷新页面的情况下让评论出现在帖子上？

这是我发布评论的路线:

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

将此评论发布到数据库的 Controller :

public function postComment()
 {
     extract(Input::only('user_id', 'resource_id', 'body'));
     $this->execute(new PostCommentCommand($user_id, $resource_id, $body));

     return Redirect::back();
 }

我使用命令总线，最终将评论保存到数据库，如下所示:

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

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

    return $comment;
}

评论模型:

public static function leavePostComment($resource_id, $body)
{
    return new static([
        'resource_id' => $resource_id,
        'body' => $body
    ]);
}

这是加载评论框的 View (包含属于帖子的所有评论和用于发布新评论的类型框。当用户点击“输入/返回”时，我使用JS来发布评论“键):

<div class="comment-box-container">
<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

<!--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-->

这是我的 ajax Javascript:

(function(){

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

    $.ajax({
        type: method,
        url: url,
        data: form.serialize(),
        success: function() {

              ** I DON'T KNOW WHAT TO PUT HERE TO MAKE THE 
              COMMENT-BOX RELOAD AND DISPLAY THE NEWLY 
              POSTED COMMENT **

            }
    });

    e.preventDefault();
});
})();

请注意，我对 JavaScript 很陌生，对 Ajax 甚至更陌生。任何帮助将不胜感激!!

Answer 1

大致如下:

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function(data) {
        // use a temp wrapper element to workaround weak jQuery HTML parser
        var tmp = $('<div>');
        tmp.html(data);
        // update the comment box with the new one
        $('.comment-box').html(tmp.find('.comment-box').html());
        // update the form (so it eventually shows validations errors)
        // don't forget to empty it via PHP if the submission was
        // successful
        $('.type-box').html(tmp.find('.type-box').html());
        tmp.destroy();
    }
});