Laravel 5.5 AJAX实时数据搜索无法正常工作

时间:2018-07-10 09:28:02

标签: php ajax laravel laravel-5 laravel-5.5

我在我的 blade文件 show.blade.php 中进行了AJAX搜索,并且在这种show方法中部署了特定的用户,例如 网址: http://127.0.0.1:8000/client/1

这是我的路线

Route::resource('client', 'ClientController',
        ['as' => 'encoder']);

这是一个资源控制器,其中包括用于显示特定客户端的show方法。

这就是我在控制器

中所做的事情
public function show($id, Request $request)
    {
        $client = $this->clientRepository->with(['request' => function ($query) {
            $query->orderBy('created_at', 'desc');
        }])->findWithoutFail($id);

        $keyword = $request->get('keyword');

        if (!$keyword) {
            $client_requests = AnalysisRequest::where('client_id', $client->id)
            ->orderBy('created_at', 'desc')->get();
        } else {
            $client_requests = AnalysisRequest::where('client_id', $client->id)
            ->OrWhere('id', 'LIKE', '%keyword%')
            ->OrWhere('sample_descrition', 'LIKE', '%keyword%')
            ->OrWhere('special_instruction', 'LIKE', '%keyword%')
            ->orderBy('created_at', 'desc')->get();
        }

        // dd($client_requests);

        if (empty($client)) {
            Flash::error('Client not found');

            return redirect(route('encoder.client.index'));
        }

        echo view('encoder-dashboard.client.show', compact('client_requests'))
        ->with('client', $client)
        ->render();
    }

我有一个show函数,该函数将显示一个特定的客户端,该ID在控制器中作为参数传递,以显示该特定的客户端。现在,我还有一个要搜索的特定客户端的请求。

这是我在 AJAX 中所做的。

$(document).ready(function(){
      $('.searchbar').on('keyup', function(){
          var text = $('#searchbar').val();
          $.ajax({
              dataType: "json",
              type:"GET",
              url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),
              data: {text: $('.searchbar').val()},
              success: function(response) {
                console.log(response);
              }
          });
      });
  });

和我的 show.blade.php

<div class="row">
                    <div class="col-sm-6">
                        <div class="form-group" id="results">
                            <input type="hidden" id="client_id" class="id_search" name="client_id" value="{{ $client->id }}">
                            <input class="form-control searchbar" id="searchbar" name="searchbar" placeholder="Search...">
                        </div>
                    </div>
                </div>

                @include('encoder-dashboard.client.request')

,最后是 request.blade.php

<!-- The timeline -->
  @if (isset($client_requests) && count($client_requests) > 0)
  @foreach($client_requests as $request)
  <ul class="timeline timeline-inverse">
    <!-- timeline time label -->
    <li class="time-label">
          <span class="bg-red">
            {{ $request->created_at->format('M d, Y') }}
          </span>
    </li>
    <!-- /.timeline-label -->
    <!-- timeline item -->
    <li>
      <i class="fa fa-edit bg-blue"></i>

      <div class="timeline-item">
        <span class="time"><i class="fa fa-clock-o"></i> {{ $request->created_at->diffForHumans() }}</span>

        <h3 class="timeline-header">Request Code: <a href="{!! route('encoder.analysis-request.show', $request->id) !!}">{{ $request->reference_no() }}</a>
            @if ($request->rushable == 1)
              <p style="color:red">This request is for RUSH!</p>
            @else
            @endif
        </h3>

        <div class="timeline-body">
          Description: <b>{{ $request->sample_description }}</b>
          <br>
          Service Requested: <b>{{ $request->service->description }}</b>
          <br>
          Category Requested: <b>{{ $request->category->name }}</b>
          <br>
          Method Requested: <b>{{ $request->methodology->name }}</b>
          <br>
          Special Instruction: <b>{{ $request->special_instruction }}</b>
          <br>
          @if ($request->status == 'for_testing')
              Status: <span class="label label-warning">Pending</span>
          @elseif ($request->status == 'under_analyzation')
              Status: <span class="label label-info">Under Analyzation</span>
          @elseif ($request->status == 'finished')
              Status: <span class="label label-success">Finished</span>
          @endif
        </div>
        <div class="timeline-footer">
          <a class="btn btn-primary btn-xs" href="{!! route('encoder.analysis-request.show', $request->id) !!}">Read more</a>
          {{--  <a class="btn btn-danger btn-xs">Delete</a>  --}}
        </div>
      </div>
    </li>
  </ul>
  @endforeach
  @endif

我做错了什么?我现在在这里没有收到任何错误。

我之前有一个 500个内部服务器错误,但由于网址错误而设法解决。

  

获取http://127.0.0.1:8000/encoder/client/1?keyword=dsa 500(内部   服务器错误)发送@ jquery.min.js:4 ajax @ jquery.min.js:4   (匿名)@ 1:363派遣@ jquery.min.js:3 q.handle @   jquery.min.js:3

我的 app.blade.php 中有我的 csrf令牌和脚本ajax设置标头。

我会在控制器中创建一个单独的方法,该方法具有相同的 GET 请求,但不传递任何参数吗?并将id作为隐藏的请求输入传递​​给其他目的。

也许我应该 POST请求而不是 GET请求?,但是如何?因为我还显示了将id作为参数传递的特定资源。

感谢有人可以帮助您。 预先感谢。

6 个答案:

答案 0 :(得分:1)

在刀片中文件的头部:

<meta name="csrf-token" content="{{ csrf_token() }}">
您的aJax中缺少

csrf_token标头。替换为:

 $.ajax({
              dataType: "json",
              type:"GET",
    headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
              url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),
              data: {text: $('.searchbar').val()},
              success: function(response) {
                console.log(response);
              }
          });
      });

答案 1 :(得分:1)

您的帖子缺少一个明确的问题。我不确定您的具体问题是什么,但是您的代码中弹出了一些内容:

url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),

如果从外部文件加载JavaScript,则无法在JavaScript中访问url()方法,并且代码应在开发人员工具的控制台中报告错误(您应该看到类似“ Uncaught SyntaxError:Unexpected identifier”之类的内容”)。如果是这种情况,请替换

url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),

具有:

url: 'encoder/client/' + $('.id_search').val(),

答案 2 :(得分:0)

我什至没有机会尝试Route::resource,即使我觉得我现在应该有。

如果您正在寻找不同的方法,则可以在各行之间做一些事情:

  1. 在路由上指定HTTP Verb并指向控制器的方法

Route::get('show', 'ClientController@show/{id}');
//On the post, the standard is to send the id within the body but you can play {id} on the url if that's your plan
Route::post('show', 'ClientController@show'); 

如果需要,您可以只使用POST来构建整个应用程序,但是我发现使用标准可以使事情变得更易读,例如读一本书(获取一些客户端,然后将某些客户端转换为获取客户端的信息并放入客户进入应用程序)

  

https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

  1. 您可以并且应该返回一个视图而不回显它(即使您可以设法使用它来访问视图),并尽可能遵循SOLID的原理
  

https://hackernoon.com/solid-principles-made-easy-67b1246bcdf

  1. 我不确定这个findWithoutFail($id),假设不存在通过$ id传递的$ id,该怎么办?进行FindOrFail或验证是否更好?

为了帮助您进行调试,因为它显然没有错误: 必须发送csrf令牌,因为它是针对CSRF的Laravel保护。如果您不想使用它,请查看下面的链接

  

https://laravel.com/docs/5.6/csrf

使用dd查看查询的输出,是否返回预期结果? 您是否按预期收到了该视图? 尝试仅返回数据(无视图),然后控制台记录输出

编辑:如果无法解决,请发布您的状态码500,以便我们提供帮助

答案 3 :(得分:0)

在Blade文件中,设置URL并从Blade或您的Jquery代码获取URL

在javascript中使用Blade语法不是正确的方法。 还请检查请求中的令牌,否则您可以忽略此路由的令牌

<input type="hidden" id="show_url" value="{{ action('ClientController@show') }}">


var showURL = $("#show_url").val();
$.ajax({
    dataType: "json",
    type:"GET",
    url: showURL+'/'+$('.id_search').val(),
    data: {text: $('.searchbar').val()},
    success: function(response) {
        console.log(response);
    }
});

答案 4 :(得分:0)

正如其他人提到并详细介绍的那样,您似乎在请求中缺少CSRF令牌。有些人建议将令牌添加到请求中,但我可能会建议一种更好的方法,以免将来为您担心而烦恼。

  1. 在刀片布局模板中,在HTML的head中定义一个引用CSRF令牌的元标记:

    <meta name="csrf-token" content="{{ csrf_token() }}">
    
  2. 定义一个全局JavaScript文件,然后再包含任何其他JavaScript文件。

  3. 将以下代码添加到该全局文件中:

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    }); 
    

现在,该规则已设置为每个AJAX请求都应在请求的标头中包含上述CSRF令牌。

但是,内部服务器错误表示该错误发生在其他地方,因此,我建议您将注意力转移到storage/logs/laravel.log上,看看该错误是否已被更详细地记录。

答案 5 :(得分:0)

没有您的larvel.log的输出,实际上只是在猜测问题的根源。但是,我看到了两个潜在的问题:

更改返回数据类型

您的Ajax请求明确要求使用json属性设置的dataType。您可以尝试将控制器中的收益更改为以下内容:

return json_encode([
    'data' => view()->make('encoder-dashboard.client.show', 
        compact('client_requests'))
    ->with('client', $client)
    ->render();
]);

或在ajax调用中更新您的dataType:

$.ajax({
    dataType: "html",
    ....
});

检查$ client是否为空

在您的控制器中,您正在使用$client加载findWithoutFail,然后立即在$client->id块中调用if/else

if (!$keyword) {
    $client_requests = AnalysisRequest::where('client_id', $client->id)
    ->orderBy('created_at', 'desc')->get();
} else {
    ...
}

如果$client为空,则将导致错误。而是将空支票移到if/else块之前:

if (empty($client)) {
    Flash::error('Client not found');

    return redirect(route('encoder.client.index'));
}

if (!$keyword) {
  ...
}

在链接属性之前验证关系是否存在

request.blade.php中,您试图获取关系的属性,而不检查它们是否存在。如果它们不存在,将导致崩溃。而是先检查不为空的

@if (!empty($request->service))
    @if (!$request->service->isEmpty())
        <br>
        Service Requested: <b>{{ $request->service->description }}</b>
    @endif
@endif