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

Question

I want to refresh/update my div when a successful ajax operation occurs. But I've no exact idea how to do that.

Clearly, I can say that my div should show the inserted data after the successful insertion operation done by ajax . And it obviously should be done without loading page.

I'm attaching what I've tried so far.

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>

This .all-posts-body should be refreshed without reloading page whenever I insert a post by ajax.

I'm attaching a sample image for better explanation

Answer 1

You can send the HTML content that you want from the backend and replace the success with

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

Answer 2

you can make something like this (i prefer to use id not class)

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

and please add space before your id