Laravel Ajax 根据所选选项显示列表

Question

我正在使用 Laravel。我选择了下拉列表，并通过选择特定选项，我正在过滤内容列表并使用 Laravel $request 刷新页面，但我正在努力过滤列表而不刷新页面。这意味着我必须在这里使用 Ajax。

这是我的代码部分：

在控制器中，我传递两个变量：“categories”和“selectedCategory”。

categories 变量是类别中的数组，selectedCategory 只是列表中的特定选择选项：

$selectedCategory = $request->get('category_id', '62319');

我认为： 选择下拉菜单。

  <select id="categories" name="category_id" class="form-select">
    @foreach($categories as $category)
      <option value="{{ $category['id'] }}" {{ $category['id'] == $selectedCategory ? 'selected' : ''}}>{{ $category['serviceCode'] }}</option>
    @endforeach
  </select>

内容列表：

@foreach($ranges as $range)
  @if($range->id == $selectedCategory)
  <div class="col-sm-6">
    <div class="custom-checkbox">
      <input type="checkbox" id="{{ $range->id }}" name="serviceTimeRangesIds[]" value="{{ $timeRange->id }}">
      <label for="{{ $range->id }}"><span>{{ $range->startHour }}</span> - <span>{{ $range->endHour }}</span></label>
    </div>
  </div>
  @endif
@endforeach

从这一行： @if($range->id == $selectedCategory) - 我正在过滤内容。

由于我需要使用Ajax，所以我不知道如何在不刷新数据的情况下实现这种过滤。

这是我迄今为止尝试过的：

在下面的刀片中我有这个：

  <script>
    $(document).ready(function(){

      $("#categories").on("change", function () {
        var service_id = this.value;
        //alert(service_id);

        $.ajax({
          url: "{{ route('changeCategoryId') }}",
          type: "POST",
          data: {
            "_token": "{{ csrf_token() }}",

          },
          success: function() {
              console.log("OK");
          }
        });
      });

    });
  </script>

这是路线：

Route::post('/changeCategoryId', 'App\Http\Controllers\CategoryController@changeCategoryId')->name('changeCategoryId');

这是控制器：

public function changeCategoryId(Request $request) {

}

那么，我到底需要在这个控制器中放入什么，以便我可以获取数据并使用 Ajax 对其进行过滤？

Answer 1

确保为过滤后的内容创建刀片部分视图（例如，

content.blade.php

）。该部分视图应包含您希望动态更新的 HTML 结构。

当用户从下拉列表中选择一个类别时，Ajax 请求将分派到此配置中的 Laravel 后端。此请求根据所选类别 ID 过滤内容，并将过滤后的内容作为部分视图返回。最终，JavaScript 使用接收到的部分视图更新页面内容。

public function changeCategoryId(Request $request) {
    $selectedCategory = $request->input('category_id');
    $filteredContent = // Logic to filter content based on $selectedCategory
    
    return view('content', ['ranges' => $filteredContent])->render();
}