javascript - 在 Laravel 中使用 Ajax 请求进行搜索

Question

下面是我想用来在表中搜索客户的代码。当我开始输入时，我在控制台中看到 500 状态错误。在我的日志中，我看到此错误

local.ERROR: Call to a member function send() on null {"exception":"[object] (Symfony\Component\Debug\Exception\FatalThrowableError(code: 0): Call to a member function send() on null at /User/public/index.php:58)

似乎没有找到任何客户，这就是它为空的原因，但我不知道下面的代码有什么问题。

我可能会错过什么？

Controller

  public function index(Request $request)
         {
            $query = "%".$request->get('myInput')."%";
            $customers = Customer::where('name','LIKE',$query)->where('id',Auth::user()->id)->paginate(10);             
             return view('customer.index',compact('customers','query'));

         }

查看

<script>

    $(document).ready(function () {
            var typingTimer;               
            var doneTypingInterval = 100;  

            $("#myInput").on('keyup', function () {
                clearTimeout(typingTimer);
                if ($('#myInput').val()) {
                    typingTimer = setTimeout(doneTyping, doneTypingInterval);
                }
            });
        });

        //user is "finished typing," do something
        function doneTyping() {
            var key = $('#myInput').val();

            if (key.length >= 1) {
                $.ajax({
                    url: '/admin/dashboard/customer/all/' + key,
                    type: 'GET',
                    beforeSend: function () {
                        $("#table").slideUp('fast');

                    },
                    success: function (data) {
                        $("#table").html(data);
                        $("#table").slideDown('fast');
                    }
                });

       }
    }
    </script>

HTML

      <input type="text" class="form-control pull-right" id="myInput" name="myInput" placeholder="Search...">

<table class="table" id="table"> 
<thead>
    <tr> 
    <th>Name</th>    
</tr>

</thead>
<tbody>
@foreach($customers as $customer)
<tr>
<td>{!! $customer->name !!}</td>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$customers->links()}}

更新

$(document).ready(function () {
        var typingTimer;                //timer identifier
        var doneTypingInterval = 100;  //time in ms (5 seconds)

        $("#myInput").on('keyup', function () {
            clearTimeout(typingTimer);
            if ($('#myInput').val()) {
                typingTimer = setTimeout(doneTyping, doneTypingInterval);
            }
        });
    });

    //user is "finished typing," do something
    function doneTyping() {
        var key = $('#myInput').val();

        if (key.length >= 1) {
            $.ajax({
                url: '/admin/dashboard/customer/search/?myInput='+key,
                type: 'GET',
                beforeSend: function () {
                $("#table").slideUp('fast');

                },
                success: function (data) {
                    console.log(data);
                    // $("#table").append(data);
                    $.each(data, function(key, value) {
                        var tr = $("<tr />")
                       $.each(value, function(k, v) {
                         tr.append(
                           $("<td />", {
                             html: v
                            })[0].outerHTML
                         );
                        $("#table").append(tr)
                       })
                     })
                    $("#table").slideDown('fast');
                }
            });

   }
}

Answer 1

好吧，您的查询基本上是说找到 id 等于当前经过身份验证的用户且名称与输入匹配的客户!搜索名称并添加身份验证用户限制没有多大意义!并且不确定为什么您需要对客户响应进行分页。

为了避免找不到客户时出现 500 服务器错误，我建议您添加以下内容:

  public function index(Request $request)
  {
    if(!request()->get('myInput'))
    {
       return response(['status'=>'Input not provided']);
    }

    $query = "%".$request->get('myInput')."%";

    $customers = Customer::where('name','LIKE',$query)->get();   

    //since you are making an ajax call you must check first, since a view returned to ajax does not fit.

      if(request()->wantsJson()){

          return response(['data'=>$customers], 200);
      }

     return view('customer.index',compact('customers','query'));

  }