使用HTTP请求无法获取JSON数据，求助获取Facebook分享数方案

嘿，我帮你梳理下代码里的几个关键问题，然后给你修正后的版本，应该就能解决拿不到JSON数据的问题了：

先说说你代码里的坑 #

• 拼写错误：document.getElementByID 里的ID应该是小写的d——正确写法是document.getElementById，这个小错误会导致无法找到DOM元素
• 数据访问路径错了：Facebook Graph API返回的JSON结构是把你请求的URL作为键名的，比如你请求universalmanual.com，返回的data里会有一个"http://universalmanual.com"的键，不能直接用data.share去访问
• 目标URL不一致：你说要获取backlinko.com的数据，但代码里写的是universalmanual.com，这大概率是笔误啦
• 没处理错误情况：如果请求失败（比如网络问题、API返回错误），你的代码没有任何提示，很难排查问题

修正后的完整代码 #

<div id='demo'></div>
<script>
// 换成你实际要查询的目标网站URL
const targetUrl = "http://backlinko.com";
// 用encodeURIComponent编码URL，避免特殊字符搞砸请求
const fbsrc = `https://graph.facebook.com/?ids=${encodeURIComponent(targetUrl)}`;

// 用fetch替代XMLHttpRequest，语法更简洁，也更现代
fetch(fbsrc)
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求出错啦，状态码：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 通过目标URL作为键，拿到对应的数据对象
    const pageData = data[targetUrl];
    if (pageData && pageData.share) {
      const shareCount = pageData.share.share_count;
      document.getElementById('demo').innerHTML = `该页面的Facebook分享数：${shareCount}`;
    } else {
      document.getElementById('demo').innerHTML = "抱歉，无法获取到分享数据";
    }
  })
  .catch(error => {
    // 处理请求失败的情况，比如网络问题或者API返回错误
    document.getElementById('demo').innerHTML = `请求失败：${error.message}`;
    console.error('详细错误信息：', error);
  });
</script>

额外的小提示 #

1. 指定API版本：建议在请求URL里加上Graph API的版本号，比如https://graph.facebook.com/v18.0/?ids=...，不指定版本的话会用默认的旧版本，可能随时被废弃
2. 开发者工具排查：如果还是有问题，按F12打开浏览器的开发者工具，去Network面板看一下请求的状态和返回的具体内容，能快速定位到底是请求发错了还是数据结构不对

这样应该就能顺利拿到分享数啦！

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