PHP Laravel项目jQuery AJAX路由在嵌套URL下失效问题咨询

异常核心是renderCart()函数内的AJAX请求使用了相对路径，浏览器解析相对路径时会基于当前访问页面的URL层级做拼接，导致不同页面下实际发起请求的地址不匹配路由规则：

• 访问根路径页面 https://www.solhut.com/msbooks 时，相对路径rendercart会被拼接为https://www.solhut.com/msbooks/rendercart，和web.php中定义的路由完全匹配，因此可以正常执行逻辑。
• 访问嵌套层级页面 https://www.solhut.com/msbooks/teacher/35/awais-bhatti 时，同样的相对路径会被拼接为https://www.solhut.com/msbooks/teacher/35/rendercart，该地址没有配置对应路由，自然无法命中你写的处理方法。

添加按钮的点击事件始终能正常触发、添加购物车的POST请求不受页面层级影响，是因为这个POST请求用提前定义的base_url拼接成了绝对路径，和当前页面URL无关。

两种方案都可以解决问题，根据你的项目实际情况选就行：

• 方案1：全局配置项目基础路径，所有AJAX请求改用绝对路径（适合JS单独存为静态文件的场景）
  首先在公共引入的Blade模板（一般是resources/views/layouts下的公共布局文件）的<head>标签内，提前定义JS全局变量，输出项目的根路径：

  <script>
      const APP_BASE_URL = "{{ url('/') }}";
  </script>
  

  然后修改custom.js里renderCart函数的请求地址，把原来的相对路径替换为绝对路径：

  function renderCart() {
   // 仅修改请求地址部分，其余原有逻辑保持不变
   $.get(APP_BASE_URL + '/rendercart', function (data) {
       $("#cartList").empty();
       var total = 0;
       $("#cart-total").html(data.data.length);
       
       $.each(data['data'], function (i, item) {
           var html = "<li>\n" +
               "                    <div class=\"shopping-cart-img\">\n" +
               "                        <a href=\"#\"><img alt=\"Nest\" src=\"" + item.item.strImageThumbnail + "\"/></a>\n" +
               "                    </div>\n" +
               "                    <div class=\"shopping-cart-delete\">\n" +
               "                        <a href=\"#\" class=\"cartItemDel\" data-pid=\"" + item.item.intID + "\"><i class=\"fi-rs-cross-small\"></i></a>\n" +
               "                    </div>\n" +
               "                    <div class=\"shopping-cart-title\">\n" +
               "                        <h4><a href=\"#\">" + item.item.strDesc + "</a></h4>\n" +
               "                        <h4><span>" + item.dblItemQty + " × </span>" + item.item.strUOM + " " + item.item.dblSalePrice + "</h4>\n" +
               "                    </div>\n" +
               "                </li>";
           $("#cartList").append(html);
           
           total += item.item.dblSalePrice * item.dblItemQty
       });
       $(".cartTotal").text("Rs " + total);
   });
  }
  

• 方案2：直接用Laravel路由助手生成完整请求地址（更推荐，后续调整路由前缀不需要修改前端代码）
  如果JS代码是直接写在Blade模板内的，可以直接用route()助手生成带域名的完整路由地址，替换原来的相对路径：

  $.get("{{ route('rendercart') }}", function (data) {
    // 其余原有逻辑保持不变
  })
  

  如果JS是单独的静态文件无法直接解析Blade语法，可以在公共模板的body标签上添加data属性存储路由地址，JS加载时读取属性值即可。

额外提示：修改完成后记得清一下浏览器缓存再测试，避免旧的JS文件缓存导致修改不生效。

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