Ajax响应缺失值问题：jQuery请求URL解析HTML时目标span为空如何取值？

我希望通过jQuery调用某个URL，并从返回的HTML响应中解析出一个特定值。但目前遇到的问题是，承载该值的span标签为空。以下是我的代码：

$.ajax({ 
  url: url, 
  success: function(data) { 
    var parser = new DOMParser(); 
    var responseDoc = parser.parseFromString(data, "text/html"); 
    console.log(responseDoc); 
    var score = responseDoc.getElementById('score'); 
    console.log('Score: ' + score.innerHTML); 
  } 
}); 

请问是否有办法获取到该值？

别担心，这种情况我太熟了！问题十有八九是这个span#score里的内容是页面加载完成后通过JavaScript动态渲染出来的，而你现在解析的只是服务器返回的原始静态HTML，里面自然是空的。给你几个实用的解决思路：

1. 优先找后端接口（最稳妥的方案） #

如果能拿到后端提供的直接返回分数的API接口，直接请求这个接口拿数据才是最优解。毕竟HTML是给用户看的渲染层，后端肯定有存储这个分数的数据源，直接请求JSON接口不仅数据干净，还避免了解析HTML的各种坑。

2. 用jQuery的$.load()方法加载指定元素 #

试试用jQuery的load()方法，它会把目标页面的内容加载到页面中，并且自动执行页面里的脚本，这样动态渲染的内容就能正常显示了：

// 创建一个临时隐藏容器，用来加载目标内容
const $tempContainer = $('<div>').hide().appendTo('body');

// 加载目标URL中#score元素所在的部分到容器
$tempContainer.load(`${url} #score`, function() {
  // 从容器里取出渲染好的分数
  const score = $tempContainer.find('#score').html();
  console.log('Score: ' + score);
  
  // 用完临时容器记得删掉，避免污染DOM
  $tempContainer.remove();
});

注意：这个方法受同源策略限制，如果目标URL和你的页面不在同一个域名下，会触发跨域错误，需要后端配合开启CORS或者使用代理。

3. 检查原始HTML中的隐藏数据源 #

有些网站会把动态渲染需要的数据提前放在原始HTML的script标签里（比如全局变量），你可以先打印一下data看看有没有类似这样的内容：

<script>
window.pageData = { userScore: 89 };
</script>

如果有的话，直接用正则从data里提取这段JSON字符串，转成JavaScript对象就能拿到分数了，比等待页面渲染高效得多！

4. 复杂场景用无头浏览器渲染 #

如果这个分数的渲染逻辑特别复杂（比如需要登录验证、依赖多个异步请求），那前端直接处理就不太现实了，得用无头浏览器（比如Puppeteer）模拟真实浏览器加载页面，等页面完全渲染完成后再提取数据。不过这个方法需要后端环境支持，前端无法直接实现。

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