Laravel路由传参后JavaScript失效不展示搜索结果问题求助

核心问题1：静态文件相对路径错误 #

你使用load("text.html ...")加载爬取结果时，用的是相对当前页面URL的路径：

• 访问/test、/result这类单层路径路由时，请求路径为/text.html，可正常读取
• 访问/search/xxx这类双层路径路由时，请求路径自动变成/search/text.html，该路径不存在，加载失败导致无内容渲染

问题2：Blade模板脚本未正确渲染 #

你将CSS、jQuery引入以及自定义JS代码写在了@section区块之外，按照Laravel Blade的渲染规则，@extends指令后只有@section内的内容会被插入到父模板对应的@yield位置，区块外的代码会被直接忽略，之前正常运行属于巧合。

问题3：爬虫关键词硬编码 #

你当前curl请求的Tokopedia搜索URL是写死的固定关键词hp%2024mh，没有使用路由传递的$keyword参数，即便页面正常渲染，也无法返回对应搜索词的结果。

修复步骤 #

1. 修正模板资源放置位置
   在父模板layout.app的<head>标签内添加@yield('styles')，</body>标签前添加@yield('scripts')，然后在子视图中调整资源位置：

   @section('styles')
   <link href="/css/card.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   @endsection
   
   @section('body')
   <!-- 原有HTML结构 -->
   <div class="container-fluid bg-trasparent my-4 p-3" style="position: relative;">
       <div class="row py-5">
           <div class="col-sm d-flex justify-content-center">
               <h3>Search Result</h3>
           </div>
       </div>
       <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3" id="carda">
       </div>
   </div>
   
   <!-- 脚本放到body区块末尾 -->
   <script>
       $(document).ready(function(){
           var img;
           // 注意把load路径改成绝对路径
           $( "#carda" ).load( "/text.html .css-1d1aa4 > img", function() {
               var ancestor = document.getElementById('carda');
               var child = ancestor.getElementsByTagName('*');
   
               var i;
               for (i = 0; i < 3; i++) {
                   child[0].remove();
               }
   
               $( " #carda > img " ).removeClass("success fade").addClass("productImage");
               $( " .productImage ").wrap("<div class='col'><div class='card h-100 shadow-sm'></div></div>");
               $( " .card ").append("<div class='card-body'><div class='clearfix mb-3'> <span class='float-start badge rounded-pill bg-success'>Rp. 1,000,000.00</span></div><h5 class='card-title'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5><div class='text-center my-4'> <a href='#' class='btn btn-warning'>View Product</a> </div></div>");
           });
       });
   </script>
   @endsection
   

2. 修正文件读写路径
   视图顶部的PHP写入逻辑改用绝对路径，避免写入位置错误：

   // 替换原有file_put_contents行
   file_put_contents(public_path('text.html'), $response);
   

3. 替换为动态搜索关键词
   视图顶部的curl请求URL改为使用路由传递的$keyword，同时添加UA头规避反爬拦截：

   $searchKeyword = urlencode($keyword);
   curl_setopt($ch, CURLOPT_URL, 'https://www.tokopedia.com/search?st=product&q='.$searchKeyword);
   curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
   

可选优化 #

当前将爬取结果写入静态文件的逻辑存在并发冲突问题，多用户同时搜索时文件内容会互相覆盖，可改为直接将爬取结果传入前端，无需读写本地文件：

// 视图顶部PHP爬取后直接赋值给JS变量
<script>const crawlResult = {{ json_encode($response) }};</script>

JS中直接从变量中解析DOM元素，无需再发起额外请求加载text.html。

内容的提问来源于stack exchange，提问作者treble18