在laravel中創建隨機按鈕5.5

Question

我正在處理項目，並在我的應用程序的第一頁中顯示隨機順序中的一個帖子，但也有一個按鈕用於刷新此隨機帖子並顯示另一個帖子而不需要用戶刷新頁面。

現在我的問題是，如何使該按鈕的作品？

這裏是我的控制器：

public function index() { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->take(1)->get(); 
     return view('welcome', compact('randomfood')); 
} 

這是我的看法：

@foreach($randomfood as $randfood) 
     <div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randfood->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
     <div class="col-md-8"> 
       <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randfood->title}}</a></h5> 
       {!! str_limit($randfood->description, 100) !!} 
     </div> 
     <div class="col-md-2 text-center"> 
       <p>Don't like?</p> 
       <a class="bhover" href="#">Find another recipie</a> 
     </div> 
@endforeach 

UPDATE：

JS代碼，現在就像是從這個檢查後， http://www.jslint.com/

$(document).ready(function() { 
$("a.bhover").click(function() { 
$.ajax({ 
      url: "{{route('food.randompost')}}", 
      data: {"token_": "{{Session::token()}}"}, //session token, neccesary to use POST request 
      type: "food", 
      success: function (data) { 
      $("#live_content").empty(); //clean the actual post 
      $("#live_content").append(data); // add new post from the controller 
      }, 
      error: function(data){ 
       //handle errors here 
      } 
     }); 
}); 
}); 
}); 

錯誤控制檯：

SyntaxError: expected expression, got '}'[Learn More] 

Answer 1

你真的想在這裏做的是：

public function index() { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->first(); 
     return view('welcome', compact('randomfood')); 
} 

所以，你可以用你的隨機食物後作爲一個單一的元素，而不是作爲採集。讓我們添加它包裝所需的現場元素的DIV使它直播：

<div id="live_content"> 
        <div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randomfood ->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
        <div class="col-md-8"> 
        <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randomfood->title}}</a></h5> 
         {!! str_limit($randomfood->description, 100) !!} 
        </div> 
</div> 
        <div class="col-md-2 text-center"> 
         <p>Don't like?</p> 
         <a class="bhover" href="#">Find another recipie</a> 
        </div> 

歐凱現在，讓我們創建一個刀片以填補刷新的數據，即live.recipe.blade.php：

<div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randomfood ->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
         <div class="col-md-8"> 
         <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randomfood->title}}</a></h5> 
          {!! str_limit($randomfood->description, 100) !!} 
         </div> 

我們需要一個路線和處理我們的控制器Ajax調用的方法讓我們添加：

web.php

Route::post('update-post', 'YourController@updateRandomPost')->name('food.randompost'); 

控制器

public function updateRandomPost(Request $request) { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->first(); // get new random post 
     return view('live.recipe', compact('randomfood')); //fill our live post template and retrieve it to the view 
} 

我們怎麼通過使用Ajax調用調用此方法，將其添加在你的腳本段的視圖中。綁定添加到按鈕的點擊動作太大：

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
<script> 
    $(document).ready(function() { 
    $("a.bhover").click(function() { 
     $.ajax({ 
       url: '{{route('food.randompost')}}', //our fresh route name 
       data: {"token_": '{{Session::token()}}'}, //session token, neccesary to use POST request 
       type: 'post', 
       success: function (data) { 
        $('#live_content').empty(); //clean the actual post 
        $('#live_content').append(data); // add new post from the controller 
       }, 
       error: function(data){ 
        //handle errors here 
       } 
      }); 
    }); 

    }); 
</script> 

而這一切，國際海事組織，讓我知道，如果你不undersand東西