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

Posted

技术标签:

【中文标题】如何在控制器laravel 8中通过ajax传递路由链接和图像存储链接【英文标题】:How to pass route links and image storage links via ajax in controller laravel 8 【发布时间】:2021-07-23 06:25:05 【问题描述】:

我是 ajax 新手,我正在尝试为聊天框中的用户列表构建一个实时搜索框,为了使设计适合我的聊天框,我必须使 html 与我的模板相同,结果恢复正常,只是链接 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  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链接和图片链接的正确语法是什么!因为我需要链接,所以当显示结果时,我可以单击并获取结果用户的消息

【问题讨论】:

【参考方案1】:

您的代码中的逻辑似乎没问题,但是您在控制器中编写了刀片特定的语法,它不会按照您的意愿转换 sn-ps,这就是它不起作用的原因。 但我建议使用 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', '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  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 以及它们的样式等。

【讨论】:

非常感谢,答案很完美,上帝保佑你

以上是关于如何在控制器laravel 8中通过ajax传递路由链接和图像存储链接的主要内容,如果未能解决你的问题,请参考以下文章

在 Laravel 8 中通过循环获取数组数据

在 Laravel 5 中通过 AJAX 将数据从视图发布到控制器

在 Laravel 5.2 中通过 RESTful 资源控制器使用 jQuery Ajax Post 方法将数据存储在数据库中

如何在 django 中通过 AJAX 请求传递数据?

在 Laravel 中通过 Ajax 存储数据失败

在 laravel 中通过 ajax 返回视图