在laravel中使用Ajax Request进行搜索

时间:2017-12-17 16:57:34

标签: javascript jquery ajax laravel

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

  
    

local.ERROR:调用成员函数send()on null {“exception”:“[object](Symfony \ Component \ Debug \ Exception \ FatalThrowableError(code:0):调用成员函数send()在/User/public/index.php:58上的null

  

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

我可以错过什么?

控制器

  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');
                }
            });

   }
}

1 个答案:

答案 0 :(得分:0)

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

为了避免在未找到客户时出现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'));

  }