2017-10-04 120 views
1

我想refresh/update我的div成功ajax操作發生時。但我沒有確切的想法如何做到這一點。在Laravel成功的AJAX操作後刷新div

很明顯,我可以說我的div應該在ajax完成插入成功後顯示inserted數據。顯然應該在沒有加載頁面的情況下完成。

我附上了我到目前爲止所嘗試過的。

Route(web.php)

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> 

.all-posts-body應該沒有每當我通過AJAX插入後刷新頁面被刷新。

我附加了一個樣本圖像更好的解釋 enter image description here

+0

的響應參數包含ajax響應返回的數據,你需要使用它來「刷新」你的div –

+0

是的,可能我正在尋找。什麼是完美的解決方案? –

回答

0

您可以發送您從後端想要的HTML內容,並在您的成功回調更換success

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