HTML与JSON文件关联故障：无法通过link标签访问JSON对象属性

嘿，我来帮你搞定这个问题！你尝试用<link>标签关联JSON文件的思路其实走偏啦——浏览器根本不认识rel="contents"这个属性，自然不会自动加载并解析你的users2.json，所以肯定没法直接用user1.name访问里面的属性。下面是具体的解决办法：

1. 用Fetch API（推荐，现代浏览器都支持） #

这是目前最流行的异步加载JSON的方式，代码示例直接能用：

<script>
// 发起请求加载users2.json
fetch('users2.json')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error('加载JSON失败，请检查文件路径或网络');
    }
    // 把响应解析成JavaScript对象
    return response.json();
  })
  .then(data => {
    // 这里就能像操作普通JS对象一样访问属性啦
    console.log('user1的名字是:', data.user1.name);
    // 举个例子：把名字渲染到页面上
    document.getElementById('user-name').textContent = data.user1.name;
  })
  .catch(error => {
    // 捕获加载过程中的错误
    console.error('出问题啦:', error);
  });
</script>

使用时注意：如果你的HTML和JSON文件不在同一目录，要把fetch里的路径改对（比如JSON在data文件夹里，就写fetch('./data/users2.json')）。

2. 用XMLHttpRequest（兼容旧浏览器） #

如果需要支持比较老的浏览器（比如IE11），可以用这个传统方法：

<script>
const xhr = new XMLHttpRequest();
// 配置请求：GET方法，目标JSON文件，异步请求
xhr.open('GET', 'users2.json', true);

xhr.onload = function() {
  // 检查请求状态是否正常
  if (xhr.status >= 200 && xhr.status < 300) {
    // 把JSON字符串解析成JS对象
    const data = JSON.parse(xhr.responseText);
    console.log('user1的名字是:', data.user1.name);
    // 同样可以把数据渲染到页面
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

// 捕获网络错误
xhr.onerror = function() {
  console.error('网络连接出错啦');
};

// 发送请求
xhr.send();
</script>

为什么<link>标签没用？ #

这里要明确：<link>标签的rel属性有严格的标准有效值，比如stylesheet（加载样式表）、icon（加载图标）、preload（预加载资源）等，contents并不是浏览器认可的属性值，所以浏览器完全不会处理这个关联，自然不会自动加载你的JSON文件。

• 路径问题：一定要确保JSON文件的路径正确，比如本地测试时，HTML和JSON在同一文件夹下，users2.json才是正确路径；如果JSON在子文件夹，要写相对路径（比如./json/users2.json）。
• 本地跨域问题：如果直接双击打开本地HTML文件（用file://协议），有些浏览器会限制Fetch/XHR请求，建议用本地服务器测试——比如用Python运行python -m http.server，或者用Node.js的http-server工具，然后通过http://localhost:端口号访问HTML。

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