Question

所以我在我的laravel应用程序中创建了一个搜索引擎，我唯一的问题是在同一页面上显示它，

这就是我在观点中所拥有的

<div class="search">
        {{Form::open(array('url' => 'admin/search', 'method' => 'post'))}}
            {{Form::text('keyword',null,array(
            'class' => 'form-control',
            'placeholder' => 'Enter keyword...'
            ))}}<br>
            {{Form::submit()}}

    </div>
<br>
    <div class="searchs">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <th>Title</th>
                <th>Date Created</th>
                <th>Actions</th>
            </thead>
                <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    </div>

并在我的控制器中

public function search_keyword()
{
    $input = Input::get('keyword');
    $result = Post::where('title','LIKE','%' .$input. '%')->get();
    return Redirect::route('index')
        ->with('result',$result);
}

但是我希望我可以在ajax请求中执行此操作，但我不知道jquery甚至是js .. help

Answer 1

您必须使用Javascript（vanilla或例如jquery）捕获表单的提交，找到用户正在搜索的值并启动ajax请求。（jQuery $ .get（）或native XMLHttpRequest（））
现在您需要确保laravel正确接受ajax请求并将请求作为JSON返回。
如果您的请求成功返回数据，请使用ajax请求的success函数来处理数据。在搜索过程中，您可以显示一些加载图标，通知用户搜索过程正在运行。

首先，在表单中添加一个id并使用jquery监听提交事件。

<script type="text/javascript">
    $('#my-form').on('submit', function(event) {
        event.preventDefault();

        $.ajax({
                url: "/api/search",
                type: 'POST',
                data: {
                    value: $("input:first").val()
                },
                dataType: 'json',
                success: function (response) {
                    console.log(response);
                }
        });
    });
</script>

接下来，为/api/search请求注册路由，并使用return response()->json(['result' => $result]);（laravel 5）返回您的搜索请求

如果一切正常，您应该在浏览器的控制台中看到结果。

在表格中显示搜索结果

1 个答案: