Ajax 搜索 - Laravel答案

【问题标题】：Ajax search - LaravelAjax 搜索 - Laravel
【发布时间】：2014-04-13 21:44:27
【问题描述】：

我正在尝试使用 jquery、ajax 和 laravel 创建实时搜索。我也在同一页面上使用 pjax，这可能是一个问题？很简单，它应该在输入时查询数据库并过滤结果。

使用 Ajax type:POST 时，我的控制台出现 500 个错误。我使用GET 得到零错误，但不是返回@foreach，而是一个完整的页面视图（这可能是因为pjax）。

我哪里错了？

路线：

Route::post('retailers/{search}', array(
    'as' => 'search-retailers', 'uses' => 'RetailersController@search'));

控制器：

public function search($keyword) {    
    if(isset($keyword)) {
      $data = array('store_listings' => RetailersListings::search($keyword));
      return $data;
    } else {
      return "no results";
    }
 }

型号：

  public static function search($keyword) 
  {
    $finder = DB::table('retailers_listings')
              ->Where('city', 'LIKE', "%{$keyword}%")
              ->orWhere('country', 'LIKE', "{$keyword}")
      ->orderBy('country', 'asc')
      ->get();

    return $finder;
  }

查看（store.blade.php）：

<div id="flash"></div> //loading
<div id="live"> // hide content
<div id="searchword"><span class="searchword"></span></div> //search word
 <table class="table">
 <tbody>
  @foreach($store_listings as $store)
 <tr>
  <td></td> //echo out all fields eg: {{ $store->name }}
 </tr>
 @endforeach
 </tbody>
 </table>
</div>

表格：

<form method="get" action="">
<input type="text" class="search-retailers" id="search"  name="search">
</form>

Ajax 和 JS：

$(function() {
    $("#search").keyup(function() {
        var keyword = $("#search").val();
        var dataString = 'keyword='+ keyword;


        if(keyword=='') {
        } else {
            $.ajax({
                type: "GET",
                url: "{{ URL::route('search-retailers') }}",
                data: dataString,
              cache: false,
              beforeSend: function(html) 
              {
                document.getElementById("live").innerHTML = ''; 
                $("#flash").show();
                $("#keyword").show();
                    $(".keyword").html(keyword);
                    $("#flash").html('Loading Results');
                },
                success: function(html)
                {
                    $("#live").show();
                    $("#live").append(html);
                    $("#flash").hide();
                }
            });
        } return false;
    });
});

另外，这是我的 pjax 控制器，重要的是要注意我正在使用视图 store.blade.php foreach 进行搜索和此商品详情。

public function stores($city) 
  {    
    $this->layout->header = $city;
    $content = View::make('retailers.stores', with(new RetailersService())->RetailersData())
    ->with('header', $this->layout->header)
    ->with('store_listings', RetailersListings::stores($city));

    if (Request::header('X-PJAX')) {
      return $content;
    } else { 
      $this->layout->content = $content; 
    } 
  }

【问题讨论】：

标签： javascript php jquery ajax laravel

【解决方案1】：

您的路线是Route::post('retailers/{search}', [...])，然后就可以了。您将数据传递给您的 ajax 调用。在 GET 中，您会得到类似 url?key=value 的信息，但使用 POST 会将数据添加到请求正文而不是 url。知道这一点，您的路线不再有效，因为它仅查找 retailers/{search} 而不是 retailers（这是 POST 正在使用的 url）。

【讨论】：

【解决方案2】：

也许它可以帮助某人。

作为第一个问题，您将路由定义为 POST，然后在 ajax 请求中使用 GET 类型，因此它不起作用

另外，当发出 POST 请求时，Laravel 有 csrf 检查，所以为了工作，提供它。 js函数会是这样的

$(function() {
    $("#search").keyup(function() {
        var keyword = $("#search").val();
        if(keyword=='') {
        } else {
            $.ajax({
                type: "post",
                url: "{{ URL::route('search-retailers') }}",
                data: {
                    'keyword': keywork,
                    '_token': '{{ csrf_token() }}';
                },
                dataType: 'html',
              cache: false,
              beforeSend: function(html) 
              {
                document.getElementById("live").innerHTML = ''; 
                $("#flash").show();
                $("#keyword").show();
                    $(".keyword").html(keyword);
                    $("#flash").html('Loading Results');
                },
                success: function(html)
                {
                    $("#live").show();
                    $("#live").append(html);
                    $("#flash").hide();
                }
            });
        } return false;
    });
});

您可以测试您的 PHP 搜索方法，对其进行单独的测试。

【讨论】：