摘要：本文将从js引入js的角度，详细阐述如何引入json文件以及如何在代码中使用json数据。首先介绍如何在html文件中引入js文件，然后讲解如何将json数据存放在外部文件中并引入，接着演示如何使用JSON.parse()和JSON.stringify()函数对json数据做解析和字符串化处理，并最后结合实例进行总结归纳。
1、引入外部js文件
在html文件中引入js文件是很常见的操作，可以通过以下方式引入：
<head>
<script src="js文件路径"></script>
</head>
其中，js文件路径可以是相对路径或绝对路径。如果是相对路径，需要保证js文件与html文件在同一目录下或者相对路径正确。
2、引入外部json文件
将json数据存放在外部文件中，可以方便数据的管理和维护，同时将数据和代码分离也符合面向对象的编程思想。可以通过jQuery的ajax方法、XMLHttpRequest对象或fetch函数等方法异步获取json文件中的数据，然后使用JSON.parse()将json数据解析为javascript对象。
<script>
//使用XMLHttpRequest对象异步获取json数据
let xhr = new XMLHttpRequest();
xhr.open("get", "json文件路径", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let jsonStr = xhr.responseText;
let jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
}
}
xhr.send();
</script>
如果json数据结构比较复杂，也可以使用jQuery的getJSON方法，这种方式更加简便：
<script src="jquery.min.js"></script>
<script>
//使用jQuery的getJSON方法获取json数据
$.getJSON("json文件路径", function(jsonObj) {
console.log(jsonObj);
});
</script>
3、解析和字符串化json数据
JSON.parse()函数可以将json数据解析为javascript对象，JSON.stringify()函数可以将javascript对象转换为json字符串。这两个函数是操作json数据的核心函数，掌握它们可以很好地帮助我们处理json数据。
<script>
let jsonObj = {
"name": "张三",
"age": 18,
"hobby": ["basketball", "football"]
};
//将javascript对象转换为json字符串
let jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);
//将json字符串解析为javascript对象
let jsonObj2 = JSON.parse(jsonStr);
console.log(jsonObj2);
</script>
解析和字符串化函数还带有第二个参数，可以配置处理的细节，例如字符串化函数可以指定输出数据的缩进方式、引号格式等，详见MDN文档。
4、实例演示
下面通过一个实例演示如何使用引入外部json文件，并使用JSON.parse()将json数据解析为javascript对象：
//students.json文件内容
"students": [
{
"id": "1001",
"name": "张三",
"gender": "男"
},
{
"id": "1002",
"name": "李四",
"gender": "女"
}
]
//html文件内容
<html>
<head>
<title>学生信息</title> <script data-src="jquery.min.js" data-lazy="true" src="https://www.jianlow.com/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$.getJSON("students.json", function(jsonObj) {
let tbody = $("table tbody");
$.each(jsonObj.students, function(index, student) {
let tr = "<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.gender + "</td></tr>";
tbody.append(tr);
});
});
</script>
</body>
</html>
以上代码实现了从students.json文件中读取学生信息，并在html表格中显示出来的功能。通过以上的讲解，相信大家已经对js引入json文件有了更深入的了解。
总结：
本文详细阐述了js引入js的相关知识，包括如何引入外部js和json文件、如何解析和字符串化json数据，最后通过实例演示了引入json文件的具体操作。希望读者可以通过本文更好地理解js引入json文件的使用方法，提高自己的编程能力和代码规范。本文由捡漏网https://www.jianlow.com整理，帮助您快速了解相关知识，获取最新最全的资讯。
