如何在 Laravel 中过滤数据而不刷新页面？

Posted 2023-03-14

【中文标题】如何在 Laravel 中过滤数据而不刷新页面？

【英文标题】：How to filter data without page refresh in Laravel?

【发布时间】：2021-09-02 07:00:56

【问题描述】：

我想过滤数据而不刷新页面。

查看

@extends('layout.layouts')
@section('content')
    <br>
    <h2 class="text-center">SALES</h2>
    <hr>
    <div class="card text-dark">
        <div class="card-body">
            <form method="get" action="/filter">
                <div class="form-group row">
                    <div class="col-sm-2">
                        <select id="brand" name="brand" class="form-control" required>
                            <option value="0">All Brand</option>
                            @foreach($brand as $brand)
                                <option value=" $brand->id "> $brand->name_brand</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <select id="year" name="year" class="form-control">
                            <option value="0">Year</option>
                            @foreach($year as $year)
                                <option value=" $year->year "> $year->year</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Filter</button>
                </div>
                <div class="row ">
                    <div class="col">
                        <div class="card text-dark bg-light mb-6">
                            <div class="card-header">SALES</div>
                            <div class="card-body">
                                <canvas id="myLineChart"  ></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <table id="table" class="table table-bordered table-hover table-striped" data-toggle="table">
                    <thead>
                    <tr>
                        <th data-order='desc' data-sortable="true">No</th>
                        <th data-order='desc' data-sortable="true">Period</th>
                        <th data-order='desc' data-sortable="true">Total Sales</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $d)
                        <tr>
                            <td>++$i</td>
                            <td> $d->period </td>
                            <td> $d->total </td>
                        </tr>
                    @endforeach
                    </tbody>

                </table>
        </div>
    </div>
@endsection

控制器

 public function filter(Request $request)

    // my controller code it's very long, so I give the return only

    return view('filter', compact('brand', 'year', 'data'))->with('i');
 

路线

Route::get('/filter', [HomeController::class, 'filter']);

结果

过滤功能实际上正在运行，但我想在不刷新页面的情况下进行过滤。所以在按钮过滤后，点击/提交新的/过滤的图表中的数据，表格立即出现，无需刷新。 我尝试了一些教程，但不起作用。

【参考方案1】：

对特定端点进行 AJAX 调用并相应地更新 DOM。

【参考方案2】：

Laravel 是一个 php 框架，PHP 框架，PHP 从服务器请求数据并返回到客户端，它必须刷新页面。要归档数据交换，您几乎没有选择。

选项一 使用 jquery ajax，它适用于 laravel 和 bootsrtap。在官方网站上开始here

选项二（我推荐） 使用 laravel Livewire。它简单易用，是纯 PHP 并使用相同的 laravel 函数。在官方网站上开始here

选项三使用 VueJs。您可以在 laravel 应用程序中插入 vuejs。 vue 组件可以在 laravel 刀片中使用，如果你对 javascript 框架没有什么经验，这可能很难。你可以在 laravel 中阅读更多内容docs