使用 Ajax 在 Laravel 5 中进行实时搜索答案

【问题标题】：Live Search inside Laravel 5 using Ajax使用 Ajax 在 Laravel 5 中进行实时搜索
【发布时间】：2016-10-20 16:28:53
【问题描述】：

我正在将一个项目转移到 Laravel 5。我在导航栏中有一个实时搜索功能，可以在您键入时列出数据库中的现有名称。

当我输入一个字母时，Ajax 中的 url 被调用，但它在网络检查中给出 500 错误。

有人知道解决办法吗？

搜索输入：

<form action="/search" class="search_form" method="get" autocomplete="off">
                <div class="form-field">
                    <input type="text" name="s" class="search_keyword" id="search_keyword_id"
                           placeholder="Search the FTSE 100 & 250" required/>
                    <button type="submit" class="search_button" onclick="submitdata()">Search</button>
                    <div id="result">

                    </div>
                </div>
            </form>

JS 脚本

<script type="text/javascript">
$(function () {
    $(".search_keyword").keyup(function () {
        var search_keyword_value = $(this).val();
        var dataString = 'search_keyword=' + search_keyword_value;
        if (search_keyword_value != '') {
            $.ajax({
                type: "POST",
                url: "/searching",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("#result").html(html).show();
                }
            });
        }
        return false;
    });

    $("#result").live("click", function (e) {
        var $clicked = $(e.target);
        if (e.target.nodeName == "STRONG")
            $clicked = $(e.target).parent().parent();
        else if (e.target.nodeName == "SPAN")
            $clicked = $(e.target).parent();
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#search_keyword_id').val(decoded);
    });

    $(document).live("click", function (e) {
        var $clicked = $(e.target);
        if (!$clicked.hasClass("search_keyword")) {
            $("#result").fadeOut();
        }
    });

    $('#search_keyword_id').click(function () {
        $("#result").fadeIn();
    });
});

路由：

Route::post('/searching', 'SearchController@index');

搜索控制器内部的索引功能：

class SearchController extends Controller
{
public function index()
{

    $search_keyword = $_POST['search_keyword'];

    $first_query = DB::table('ftse100')->select('name', 'symbol')->
    where('symbol', 'like', '%' . $search_keyword . '%')->orWhere('name', 'like', '%' . $search_keyword . '%');

    $query = DB::table('ftse250')->select('name', 'symbol')->
    where('symbol', 'like', '%' . $search_keyword . '%')->orWhere('name', 'like', '%' . $search_keyword . '%')
        ->union($first_query)->get();


    $bold_search_keyword = '<strong>' . $search_keyword . '</strong>';

    if ($query) {
        foreach ($query as $rows) {
            echo '<div class="show" align="left"><span class="name">' . str_ireplace
                ($search_keyword, $bold_search_keyword, $rows['name']) . '</span></div>';
        }
    } else {
        echo '<div class="show" align="left">No matching records.</div>';
    }

}

【问题讨论】：

您能否提供有关您遇到的 500 错误的更多信息？将debug转为 true 以获取更多详细信息。

标签： php jquery ajax laravel

【解决方案1】：

你必须在请求中传递crsf令牌，所以参考手册：

你必须设置一个元标记：

<meta name="csrf-token" content="{{ csrf_token() }}" />

在你的 js 中：

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

https://laravel.com/docs/5.0/routing#csrf-protection

【讨论】：

【解决方案2】：

500 错误意味着您遇到了服务器问题，因为您的路由看起来很简单，这表明它在您的控制器中。

您可以通过打开调试从应用中获取更多信息：https://laravel.com/docs/5.2/errors#configuration

错误可能是 SearchController@index 正在回显内容，而不是返回它（或更好的视图）。

Laravel 响应类在你的控制器之后做了很多繁重的工作（例如设置 cookie 和标头），如果内容已经发送，可能会导致错误。

由于您的 html 在这里相当简单，我建议将其移至视图并将您的数据传递给该视图。

当然，正如 Joaquin Javi 所说，使用 csrf-token。

【讨论】：