js引入jsjs引入json文件并使用

网络阅读： 2023-12-07 22:43:22

欧意最新版本

欧意最新版本app是一款安全、稳定、可靠的数字货币交易平台。

摘要：本文将从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文件有了更深入的了解。

总结：

本文原创，转载保留链接！网址：https://licai.bangqike.com/bixun/253949.html

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。