src引入的json怎么获取

Hey小伙伴们，今天来聊聊一个技术小话题——如何在项目中获取通过src引入的JSON数据，是不是听起来有点头大？别急，我会尽量用简单易懂的方式来解释，让你轻松get到这个技能点！

我们得明白，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以易于阅读的文本形式存储和传输数据对象，在前端开发中，我们经常需要从外部文件或者API获取JSON数据，然后用这些数据来动态生成网页内容或者执行其他操作。

什么是`src`引入JSON？

在网页开发中，src属性通常用于指定资源的路径，比如图片、脚本文件等，你听说过用src来引入JSON文件吗？这是完全可行的，你可以通过<script>标签的src属性来引入一个JSON文件，就像引入JavaScript文件一样。

2. 如何通过src引入JSON文件？

假设你有一个名为data.json的JSON文件，内容如下：

{
  "name": "小明",
  "age": 25,
  "city": "上海"
}

你可以这样在HTML中引入这个JSON文件：

<script src="data.json" type="application/json" id="myData"></script>

这里，type属性设置为application/json，告诉浏览器这是一个JSON文件。id属性是为了后续能够通过JavaScript获取到这个数据。

如何获取和使用这些JSON数据？

虽然我们可以通过src引入JSON文件，但是直接通过<script>标签引入的JSON数据并不能直接在JavaScript中访问，这是因为浏览器会将这些数据当作脚本处理，而不是JSON对象，不过，我们可以通过一些小技巧来获取这些数据。

方法一：使用`fetch` API

如果你的JSON文件是通过网络请求获取的，那么可以使用fetch API来异步获取JSON数据，这是一个现代的网络请求方法，支持Promise，使得异步操作更加方便。

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 这里就可以访问到JSON数据了
  })
  .catch(error => console.error('Error:', error));

方法二：动态创建`

如果你的JSON文件是静态的，并且已经通过src引入到了HTML中，那么你可以通过动态创建一个<script>标签，并设置其text属性为JSON字符串，然后将其添加到文档中，这样，JSON数据就会被解析为JavaScript对象。

const script = document.createElement('script');
script.type = 'application/json';
script.id = 'myData';
script.text = JSON.stringify({
  "name": "小明",
  "age": 25,
  "city": "上海"
});
document.head.appendChild(script);
// 然后你可以通过DOM API获取这个数据
const data = JSON.parse(document.getElementById('myData').textContent);
console.log(data);