在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', '[email protected]')->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东西