如何使用 Ajax Laravel 过滤产品复选框？

Question

我见过很多电子商务网站，用户可以通过点击复选框来过滤产品。 例如：假设有不同品牌的手机：如三星、诺基亚、公司、公司等。不同的 colors、尺寸、memory。

当用户勾选 Samsung 复选框时，页面仅显示 Samsung mobile，当用户进一步勾选 8Gb memory 复选框时，页面显示 Samsung mobile 与 8Gb memory 等。

我想用 jQuery/Ajax 和 Laravel 来实现这样的功能。 你能告诉我这是怎么做的吗？

我有三个表， courses和categories以及category_course 。

类别表

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->string('title');
        $table->string('slug');
        $table->string('icon')->nullable();
        $table->timestamps();
    });
}

课程表

public function up()
{
    Schema::create('courses', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->string('title');
        $table->string('slug');
        $table->string('image');
        $table->string('price');
        $table->string('time');
        $table->text('body');
        $table->timestamps();
    });

    Schema::create('category_course', function (Blueprint $table) {
        $table->foreignId('category_id')->constrained()->cascadeOnDelete();
        $table->foreignId('course_id')->constrained()->cascadeOnDelete();
        $table->primary(['category_id', 'course_id']);
    });
}

探索控制器.php

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use App\Models\Course;

class ExploreController extends Controller
{
    public function index()
    {
        $categories = Category::all();
        $courses = Course::query()->latest()->paginate(20);
        return view('Home.pages.explore', compact('courses', 'categories'));
    }

    public function show($id)
    {
        $data = Course::query()->selectRaw('SELECT * FROM categories')->whereRaw('category_id IN ('.$id.')' )->get();
        echo json_encode($data);
    }
}

explore.blade.php

@foreach($categories as $category)
    <div class="form-check">
        <input class="form-check-input" onclick="categoryCheckbox({{ $category->id }})" type="checkbox" value="" id="cat_{{ $category->id }}">
        <label class="form-check-label" for="cat_{{ $category->id }}">
            {{ $category->title }}
        </label>
    </div>
@endforeach

@push('script')
    <script>
        function categoryCheckbox(id) {
            $('.courseFilters').empty();
            $.ajax({
                type: 'GET',
                url: 'getCategoryCourse/' + id,
                success: function(response) {
                    console.log(response);
                },
            });
        }
    </script>
@endpush

web.php

Route::get('/explore', [App\Http\Controllers\ExploreController::class, 'index'])->name('explore');
Route::get('/getCategoryCourse/{id}', [App\Http\Controllers\ExploreController::class, 'show']);

课程.php

public function categories()
{
    return $this->belongsToMany(Category::class);
}

类别.php

public function courses()
{
    return $this->belongsToMany(Course::class);
}

Answer 1

首先，您的代码存在问题，导致您仅向服务器发送单个category_id ，因此用户只能 select 一个类别。 为了您的目的，您必须始终传递所有数据。 假设您已将所有选定的类别传递给 API。 现在您可以使用以下方法过滤结果：

$categories = [...];
Course::whereHas('categories' => function($q) use ($categories) {
    $q->wherePivotIn('category_id', $categories);
})->get();