如何将变量（URL）与ID传入jQuery .load函数实现局部加载？

你遇到的情况是：使用jQuery的load()方法加载指定URL的特定div时，加上#product-description选择器就失效，去掉则正常。以下是排查和解决办法：

可能原因及对应解决方案 #

• 目标元素不存在或拼写错误
  确认目标页面中确实存在#product-description这个元素，检查选择器的拼写、大小写（jQuery选择器区分大小写），比如是否误写成#Product-Description或者#product_description。

• 跨域请求限制
  如果目标URL和当前页面的域名、端口、协议不一致，属于跨域请求。此时load()方法带选择器的写法会失效，因为浏览器同源策略禁止跨域获取DOM内容。
  解决办法：

  • 后端做代理，让当前页面请求同域的后端接口，由后端去获取目标页面内容并提取指定div返回。
  • 让目标页面提供专门接口，直接返回#product-description的HTML内容。

• 浏览器缓存影响
  浏览器可能缓存了旧的目标页面内容，导致找不到指定元素。可以在URL后添加时间戳参数避免缓存：

  var loadUrl = targetUrl + '?t=' + Date.now() + '#product-description';
  

• 请求失败未捕获
  给load()方法添加回调函数，查看加载失败的具体原因：

  $('#content').load(loadUrl, function(response, status, xhr) {
      if (status === "error") {
          console.log('加载出错：' + xhr.status + ' ' + xhr.statusText);
          console.log('请求地址：' + loadUrl);
      }
  });
  

修改后的示例代码 #

$(function(){
    $(document).on("click",".test-click",function(e){
      e.preventDefault();
      var targetUrl = $(this).attr("href");
      var loadUrl = targetUrl + '?t=' + Date.now() + '#product-description';
      
      $('#content').load(loadUrl, function(response, status, xhr) {
          if (status === "error") {
              console.log('加载失败: ' + xhr.status + ' ' + xhr.statusText);
              console.log('请求URL: ' + loadUrl);
          }
      });
    });
});

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