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

更新

从http://www.jslint.com/

检查后，JS代码就像这样

$(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，它包含所需的live元素以使其生效：

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

那就是所有的IMO，请告诉我，如果你不能做什么

在laravel 5.5中创建随机按钮

1 个答案: