我正在尝试使用AJAX和我的一张表在Laravel中创建实时搜索。我在此观看了YouTube视频,并在21分钟的视频中花了大约18:00。目前还没有LIVE搜索,但是他可以通过AJAX请求查看表中的数据。虽然视频并不完美,但我没有看到数据出现在表格中,但是却得到了响应,我在控制台的“响应”选项卡中的“网络”选项卡中看到了数据,但是看不到它的显示。在网页上,并且没有其他错误。
web.php:
Route::get('/admin/job-seeker/search', 'AdminJobSeekerSearchController@index')->name('admin.job.seeker.search.index')->middleware('verified');
Route::get('/admin/job-seeker/search/action', 'AdminJobSeekerSearchController@action')->name('admin.job.seeker.search.action')->middleware('verified');
AdminJobSeekerSearchController.php:
public function index()
{
return view('admin.job-seeker.search.index'));
}
public function action(Request $request)
{
if($request->ajax())
{
$total_data = '';
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = DB::table('employer_profiles')
->where('company_name', 'like', '%'.$query.'%')
->orWhere('company_address', 'like', '%'.$query.'%')
->orWhere('immediate_contact', 'like', '%'.$query.'%')
->get();
}
else
{
$data = DB::table('employer_profiles')
->orderBy('id', 'desc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '
<tr>
<td>'.$row->company_name.'</td>
<td>'.$row->company_address.'</td>
<td>'.$row->immediate_contact.'</td>
</tr>
';
}
}
else
{
$output = '
<tr>
<td colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
$str_data = implode(" ", $data);
echo $str_data;
}
}
index.blade:
@extends('layouts.admin')
@section('content')
@if (session('send-profile'))
<div class="alert alert-success">
{{ session('send-profile') }}
</div>
@endif
<div class="row">
<div class="col-md-12">
<!-- Topbar Search -->
<form class="navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-lightblue border-0 small text-white border-dark" name="search" id="search" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-success" type="button">
<i class="fas fa-cannabis"></i>
</button>
</div>
</div>
</form><br>
</div>
<div class="col-md-12">
<table class="table table-hover table-responsive-sm">
<thead class="thead-dark">
<tr>
<th scope="col">Total Data : <span id="total_records"></span></th>
<th scope="col">Company Name</th>
<th scope="col">Immediate Contact</th>
<th scope="col">Address</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
@stop
@push('scripts')
<script>
$(document).ready(function() {
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('admin.job.seeker.search.action') }}",
method: 'GET',
data: {query:query},
dataType:'json',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
});
</script>
@endpush
表中的数据应该显示在<tbody></tbody>
标签内部。以下是控制台中“响应”选项卡中“网络”选项卡中数据的屏幕截图。
尝试像这样返回$ data数组:
return response()-> json($ data);