Php 在laravel 5.5中创建随机按钮集合

我正在处理这个项目，在我的应用程序的第一页有一个块，它以随机顺序显示其中一篇文章，但也有一个按钮可以刷新这个随机文章并显示另一篇，而不需要用户刷新页面

现在我的问题是，如何使按钮工作

这是我的控制器：

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

控制台中的错误：

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

---

您在这里真正想做的是：

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>

我们需要一个路由和一个方法来处理控制器中的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>

---

这就是我的全部，如果您不了解某些内容，请告诉我。

使用Ajax调用刷新随机帖子。@SagarGautam您能帮我怎么做吗？因为您知道从数据库获取随机帖子的逻辑。当点击按钮时，您必须检测javascript中的按钮点击事件，并对将调用函数的路由进行ajax调用。在函数中，您需要编写代码来获取random post，并将random post作为函数的json响应返回。之后，在ajax的success函数中，您必须编写代码，用json响应中的数据刷新html中的当前post数据。希望您能理解。评论不适用于长时间的讨论；这段对话已经结束。

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
}

<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>