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

Reload part of page, not whole page, once Ajax is successful. Laravel

本文关键字：新加载 成功 Ajax 加载 分页      更新时间：2023-09-26

我的项目使用Laravel 4。我有一个帖子的"新闻推送"。每个帖子都可以发表评论。当用户对帖子发表评论时，页面会重新加载，新的评论会显示在评论框中。我多么不希望整个页面重新加载。因此，我可以使用ajax提交帖子。我提交表单并阻止页面刷新。然而，现在我不知道如何在不手动刷新页面的情况下让评论出现在帖子上？

这是我发布评论的路线：

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

将此评论发布到DB:的控制器

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

我使用的命令总线最终将注释保存到DB中，如下所示：

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
    ]);
}

这是加载评论框的视图（包含属于帖子的所有评论和用于发布新评论的类型框。当用户点击"输入/返回"键时，我使用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也很陌生。任何帮助都将不胜感激！！

类似的东西

$.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();
    }
});
相关文章：