时间戳

首页 > 解决方案 > 在 laravel 中使用 ajax 从控制器刀片文件中传递搜索数据时遇到问题

ajax - 在 laravel 中使用 ajax 从控制器刀片文件中传递搜索数据时遇到问题

问题描述

这是我在 Admin Controller 中的控制器方法，此方法接收搜索输入，但我在将输出数据传递到视图文件时遇到问题

public function action(Request $request)
{
    if($request->ajax())
    {

        $students=Student::where('name','LIKE','%'.$request->search."%")->paginate(5);

        $data = $students->count();
        if($data > 0)
        {
            $output=$students;

        }
        else{
           $output=$students;
        }
        return view('search' compact('output'));

    }

}

这是视图文件中的 ajax ( search.blade.php)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">

    // $(document).on('keyup', '#search', function(){
    $('#search').on('keyup',function(){
        $value=$(this).val();
        $.ajax({
            type : 'get',
            url : '{{route('search.action')}}',
            data:{'search':$value},
            success:function(data){
                $('tbody').html(data);
            }
        });

    })

</script>

<script type="text/javascript">
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>

这是ajax路线

Route::get('/search/action', 'AdminController@action')->name('search.action');

标签： ajaxlaravel-5

解决方案

更新以下源代码。

AdminController.php

public function action(Request $request)
    {
        if ($request->ajax()) {
            // Convert to lowercase after trim the searched text
            $search_text = strtolower(trim($request->search));
            $students = Student::where('name','LIKE','%'.$search_text."%")->paginate(5);
            $data = $students->count();
            $output = array();
            if ($data > 0) {
                $output = $students->toArray();
            }
            // Return JSON response
            return response()->json($output);
        }
    }

search.blade.php

<input type="text" id="search">

<div id="studentlist">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>            
        </tbody>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">

    $('#search').on('keyup',function(){
        $value=$(this).val();
        $.ajax({
            type : 'get',
            url : '{{route('search.action')}}',
            data:{'search':$value},
            success:function(response){
                var studentListHtml = "";
                if (response) {
                    if (response.data && response.data.length > 0) {
                        $.each(response.data , function( index, value ) {
                            studentListHtml += "<tr><td>" + value.id + "</td>" + "<td>" + value.name + "</td></tr>"; 
                        });
                        $("#studentlist table tbody").empty().html(studentListHtml);
                    } else {
                        $("#studentlist table tbody").empty().html("<tr><td colspan='2'>No students found</td></tr>");
                    }
                }
            }
        });

    })

</script>

<script type="text/javascript">
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>

推荐阅读