如何在控制器laravel 8中通过ajax传递路由链接和图像存储链接

问题描述

我是 ajax 的新手，我正在尝试为聊天框中的用户列表构建一个实时搜索框，为了使设计适合我的聊天框，我必须使 HTML 与我的模板相同，结果恢复正常，只是链接 href 不起作用，也找不到用户个人资料图片，我尝试了传统的 URL 语法，但似乎不是用 ajax 编写的，这是我的控制器搜索功能：

msg

这是我的脚本：

    if($request->ajax())
    {
      $output = '';
      $query = $request->get('query');
      if($query != '')
      {
       $data = DB::table('users')
         ->where('id','like','%'.$query.'%')
         ->orWhere('name','%'.$query.'%')
         ->orWhere('email','%'.$query.'%')
         ->orWhere('prenom','%'.$query.'%')
         ->orWhere('ville','%'.$query.'%')
         ->orWhere('tel','%'.$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>

谁能告诉我href链接和图片链接的正确语法是什么！因为我需要链接所以当结果显示时我可以点击并获取结果用户的消息

解决方法

您的代码中的逻辑似乎没问题，但是您在控制器中编写了特定于刀片的语法，这不会根据您的需要转换代码段，这就是它不起作用的原因。 但与其讨论该代码，我建议使用 Laravel 的最佳实践：

Laravel 提供了一个很酷的功能。有一个“render()”方法，可将刀片内容转换为 HTML。因此，不是在控制器的方法中编写 HTML，您只需将该 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','%'.$query.'%')
            ->orWhere('email','%'.$query.'%')
            ->orWhere('prenom','%'.$query.'%')
            ->orWhere('ville','%'.$query.'%')
            ->orWhere('tel','%'.$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

在您的 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);
   }
}

附言我假设您已成功从 DB 获取数据，您还可以编辑刀片 HTML 及其样式等。