Jquery 如何在控制器laravel 8中通过ajax传递路由链接和图像存储链接
我是ajax新手,我正在尝试为聊天室中的用户列表构建一个实时搜索框,为了使设计适合我的聊天室,我必须使HTML与我的模板相同,结果很好,只是链接href不起作用,也找不到用户配置文件图片,我尝试了传统的URL语法,但似乎不是用ajax编写的,以下是我的控制器搜索功能:Jquery 如何在控制器laravel 8中通过ajax传递路由链接和图像存储链接,jquery,ajax,laravel,href,livesearch,Jquery,Ajax,Laravel,Href,Livesearch,我是ajax新手,我正在尝试为聊天室中的用户列表构建一个实时搜索框,为了使设计适合我的聊天室,我必须使HTML与我的模板相同,结果很好,只是链接href不起作用,也找不到用户配置文件图片,我尝试了传统的URL语法,但似乎不是用ajax编写的,以下是我的控制器搜索功能: if($request->ajax()) { $output = ''; $query = $request->get('query'); if($query !=
if($request->ajax())
{
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = DB::table('users')
->where('id', 'like', '%'.$query.'%')
->orWhere('name', 'like', '%'.$query.'%')
->orWhere('email', 'like', '%'.$query.'%')
->orWhere('prenom', 'like', '%'.$query.'%')
->orWhere('ville', 'like', '%'.$query.'%')
->orWhere('tel', 'like', '%'.$query.'%')
->orderBy('id', 'desc')
->get();
}
else
{
$data = DB::table('users')
->orderBy('id', 'desc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '<a href="{{url("messages/' .$row->id. '")}}" title="Voir discussion">
<div class="media chat-list">
<div class="media-left thumb thumb-sm">
<img alt="" class="media-object chat-img" src="{{asset("storage/'.$row->picture.'")}}"
</div>
<div class="media-body">
<p class="media-heading m-b-10">
<span class="text-strong">'.$row->name.' '.$row->prenom.'</span>
</p>
</div>
</div>
</a>';
}
}
else
{
$output = '
<li align="center" colspan="5">No Data Found</li>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
echo json_encode($data);
}
if($request->ajax())
{
$output='';
$query=$request->get('query');
如果($query!='')
{
$data=DB::表('users')
->其中('id','like','%.$query'%'))
->orWhere('name','like','%.$query'%'))
->或where('email','like','%.$query'%'))
->orWhere('prenom','like','%.$query'%'))
->或where('ville','like','%.$query'%'))
->或where('tel'、'like'、'%.$query.'%'))
->orderBy('id','desc')
->get();
}
其他的
{
$data=DB::表('users')
->orderBy('id','desc')
->get();
}
$total_row=$data->count();
如果($total_row>0)
{
foreach($行数据)
{
$output.='';
}
}
其他的
{
$output=
未找到任何数据
';
}
$data=数组(
“表_数据”=>$output,
“总计数据”=>$total\u行
);
echo json_编码($data);
}
这是我的剧本:
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('live_search.action') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('#result').html(data.table_data);
$('#total_records').text(data.total_data);
$('#inbox').hide();
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
</script>
$(文档).ready(函数(){
获取客户数据();
函数获取客户数据(查询=“”)
{
$.ajax({
url:“{route('live_search.action')}}”,
方法:'GET',
数据:{query:query},
数据类型:'json',
成功:功能(数据)
{
$('#result').html(data.table_数据);
$('total_records').text(data.total_data);
$(“#收件箱”).hide();
}
})
}
$(文档).on('keyup','#search',函数(){
var query=$(this.val();
获取客户数据(查询);
});
});
最后是负责显示结果的代码:
<div class="form-group mt-20 is-empty">
<input type="text" class="form-control" id="search" name="search" placeholder="Rechercher..."></input>
<div id="result" class="chat-inactive">
</div>
</div>
谁能告诉我href链接和图片链接的正确语法是什么!因为我需要链接,所以当结果显示时,我可以单击并获取结果用户的消息
代码中的逻辑似乎没有问题,但您已经在controller中编写了特定于刀片服务器的语法,这将无法按照您的需要转换代码段,这就是它无法工作的原因。 但我建议使用Laravel的最佳实践,而不是讨论该代码: Laravel提供了一个很酷的功能。有一个“render()”方法,它将刀片内容转换为HTML。因此,您不必在controller的方法中编写HTML,只需在某个单独的blade文件中编写该HTML(在本例中使用$users参数),呈现响应HTML,并将其作为AJAX响应(使用JSON格式)发送回客户机。像这样:
if($request->ajax()) {
$query = $request->get('query');
if(empty($query)) {
$users = DB::table('users')
->orderBy('id', 'desc')
->get();
} else {
$users = DB::table('users')
->where('id', 'like', '%'.$query.'%')
->orWhere('name', 'like', '%'.$query.'%')
->orWhere('email', 'like', '%'.$query.'%')
->orWhere('prenom', 'like', '%'.$query.'%')
->orWhere('ville', 'like', '%'.$query.'%')
->orWhere('tel', 'like', '%'.$query.'%')
->orderBy('id', 'desc')
->get();
}
$total = $users->count();
$html = view('path.to.some.blade.file', [
'users' => $users,
])->render();
return response()->json([
'success' => true,
'html' => $html,
'total' => $total,
], 200);
} else {
return response()->json([
'success' => false,
'message' => "Something went wrong!",
], 403);
}
在这里,您可以像这样使用刀片文件:
@if($users->count() > 0)
@foreach($users as $user)
<a href="{{ url('messages/' . $user->id) }}" title="Voir discussion">
<div class="media chat-list">
<div class="media-left thumb thumb-sm">
<img alt="" class="media-object chat-img" src="{{ asset('storage/' . $user->picture) }}">
</div>
<div class="media-body">
<p class="media-heading m-b-10">
<span class="text-strong">{{ $user->name . ' ' . $user->prenom }}</span>
</p>
</div>
</div>
</a>
@endforeach
@else
<div>No Data Found</div>
@endif
p、 我假设您已经成功地从数据库中获取了数据,您还可以编辑刀片HTML及其样式等。非常感谢您,答案非常完美,上帝保佑您
success: function(data) {
if (data.success) {
// needed part
$('#result').html(data.html);
$('#total_records').text(data.total);
$('#inbox').hide();
} else {
console.log(data.message);
}
}