在Laravel中成功完成AJAX操作后刷新div

Question

我希望refresh/update div成功进行ajax操作。但我并不确定如何做到这一点。

显然，我可以说div在inserted成功完成插入操作后应显示ajax数据。显然应该在不加载页面的情况下完成。

我附上了我迄今为止所尝试的内容。

Route(web.php)

Route::resource('posts', 'PostsController', ['only' => ['store']]);

Cotroller(PostsController)

public function store(Request $request)
{
    $this->validate($request, array(
        'post' => 'required|min:20',
    ));

    $post=new Post();
    $post->userId=Auth::user()->id;
    $post->post=$request->post;
    $post->save();

    return redirect()->route('home');
}

Controller(PagesController)

public function getHome(){
    $posts=Post::orderBy('id', 'DESC')->get();
    return view('pages.home')->withPosts($posts);
}

JS

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

    success: function(response){
        $('.all-posts-body').load(); //No idea how to do this
    },
})

Views(home.blade)

<div class="all-posts-body">
    @if($posts->isEmpty())
        <div class="alert alert-warning">No post yet!</div>
    @else
        @foreach($posts as $post)
            <div class="card">
                <div class="card-body">
                    {!! nl2br($post->post) !!}
                </div>
            </div>
            <br>
        @endforeach
    @endif
</div>

每当我通过ajax插入帖子时，都应刷新此.all-posts-body而不重新加载页面。

我附上了样本图片以便更好地解释

Answer 1

您可以从后端发送所需的HTML内容，并将success替换为

 success: function(response){
    $('.all-posts-body').html(response);
 },

Answer 2

您可以进行如下操作（我更喜欢使用id而不是class）

    $('#all-posts-body').load(location.href+(' #all-posts-body'));

，请在您的ID之前添加空格