如何在控制器laravel 8中通过ajax传递路由链接和图片存储链接
How to pass route links and image storage links via ajax in controller laravel 8
我是 ajax 的新手,我正在尝试为聊天框中的用户列表构建一个实时搜索框,为了使设计适合我的聊天框,我必须制作 HTML 和我的模板一样,结果恢复正常只是 link href 不工作也找不到用户个人资料图片,我尝试了传统的 URL 语法,但似乎不写 ajax ,这是我的控制器搜索功能:
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);
}
这是我的脚本:
<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>
最后是负责显示结果的代码:
<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 link 和图片 link 的正确语法是什么!因为我需要 link 所以当显示结果时我可以单击并获取结果用户的消息
您代码中的逻辑似乎没问题,但是您在控制器中编写了 blade-specific 语法,它不会按您的需要转换代码段,这就是它不起作用的原因。
但与其讨论该代码,我建议使用 Laravel 的最佳实践:
Laravel 提供了一项很棒的功能。有一个“render()”方法,它将 blade 内容转换为 HTML。因此,不是在控制器的方法中编写 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);
}
在这里你可以像这样拥有你的 blade 文件:
@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
在您的 AJAX 成功函数中,您只需将检索到的响应 HTML 放入某个“#result”元素中:
success: function(data) {
if (data.success) {
// needed part
$('#result').html(data.html);
$('#total_records').text(data.total);
$('#inbox').hide();
} else {
console.log(data.message);
}
}
p.s。我假设你已经成功从数据库中获取数据,你还可以编辑 blade HTML 以及它们的样式等
我是 ajax 的新手,我正在尝试为聊天框中的用户列表构建一个实时搜索框,为了使设计适合我的聊天框,我必须制作 HTML 和我的模板一样,结果恢复正常只是 link href 不工作也找不到用户个人资料图片,我尝试了传统的 URL 语法,但似乎不写 ajax ,这是我的控制器搜索功能:
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);
}
这是我的脚本:
<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>
最后是负责显示结果的代码:
<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 link 和图片 link 的正确语法是什么!因为我需要 link 所以当显示结果时我可以单击并获取结果用户的消息
您代码中的逻辑似乎没问题,但是您在控制器中编写了 blade-specific 语法,它不会按您的需要转换代码段,这就是它不起作用的原因。 但与其讨论该代码,我建议使用 Laravel 的最佳实践:
Laravel 提供了一项很棒的功能。有一个“render()”方法,它将 blade 内容转换为 HTML。因此,不是在控制器的方法中编写 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);
}
在这里你可以像这样拥有你的 blade 文件:
@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
在您的 AJAX 成功函数中,您只需将检索到的响应 HTML 放入某个“#result”元素中:
success: function(data) {
if (data.success) {
// needed part
$('#result').html(data.html);
$('#total_records').text(data.total);
$('#inbox').hide();
} else {
console.log(data.message);
}
}
p.s。我假设你已经成功从数据库中获取数据,你还可以编辑 blade HTML 以及它们的样式等