ajax 或 jquery 不显示数据 Laravel

Question

我添加了一个搜索字段来显示我的实时数据，但是当我填写该字段时没有任何效果。 我创建了一个名为retour.action的路由，它在我的控制器中，所以当我尝试使用console.log('test') 时，我可以在浏览器的控制台中看到测试，但我制作的其余代码没有工作，我也没有收到错误

这是我的控制器

public function action(Request $request)
    {
        if ($request->ajax()) {
            $output = '';
            $query = $request->get('query');
            if ($query != '') {
                $retours = Returnorder::all()
                    ->where('firmaname', 'like', '%' . $query . '%')
                    ->orWhere('ordernumber', 'like', '%' . $query . '%')
                    ->orWhere('status', 'like', '%' . $query . '%')
                    ->get();

            } else {
                $retours = Returnorder::latest('id')->paginate(15);
            }
            $total_row = $retours->count();
            if ($total_row > 0) {
                foreach ($retours as $retour) {
                    $output .= '
        <tr>
         <td>' . $retour->firmaname . '</td>
         <td>' . $retour->ordernumber . '</td>
         <td>' . $retour->status . '</td>
        </tr>
        ';
                }
            } else {
                $output = '<tr>
        <td align="center" colspan="5">Geen data gevonden</td>
       </tr>
       ';
            }
            $retours = array(
                'table_data' => $output,
            );

            echo json_encode($retours);
        }
    }

这是我的脚本

$(document).ready(function(){

    fetch_customer_data();

    function fetch_customer_data(query = '')
    {
        $.ajax({
            url:"{{ route('retour.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(retours)
            {
                $('tbody').html(retours.table_data);
            }
        })
    }

    $(document).on('keypress', '#search', function(){
        let query = $(this).val();
        fetch_customer_data(query);
    });
});

而 HTML 是这样的

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="mTop">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    @if(session('message'))
                        <div class="alert alert-success" role="alert">
                            {{session('message')}}
                        </div>
                    @endif
                    <div class="card">
                        <div class="card-header">Retourmeldingen</div>
                        <div class="card-body">
                            <div class="form-group" >
                                <label for="search" hidden>Zoeken</label>
                                <input type="text" name="search" id="search" class="form-control"
                                       placeholder="Typ hier uw zoekopdracht in"/>
                            </div>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col">Firmanaam</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col">Ordernummer</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Verwerkingstijd</th>
                                    <th scope="col">Inzenddatum</th>
                                    <th scope="col"></th>
                                </tr>
                                </thead>
                                <tbody>

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

请帮帮我

Answer 1

我认为您首先需要确保您输入的内容实际上被发送回路由器。 您可以使用以下命令获取您正在输入的内容的值：

 $(function() { $('#search').on('keyup', (e) => { console.log(e.target.value); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search" type="text" name="search" />