原生js读取json文件

方法一

1.首先编写一个json文件：demo.json

[ 
{ 
"name":"张三", 
"sex":"男", 
"email":"zhangsan@123.com" 
}, 
{ 
"name":"李四", 
"sex":"男", 
"email":"lisi@123.com" 
}, 
{ 
"name":"王五", 
"sex":"女", 
"email":"wangwu@123.com" 
} 
]

2.js读取json文件

<script>
        window.onload = function () {
            var url = "demo.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
            var request = new XMLHttpRequest();
            request.open("get", url);/*设置请求方法与路径*/
            request.send(null);/*不发送数据到服务器*/
            request.onload = function () {/*XHR对象获取到返回信息后执行*/
                if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                    var json = JSON.parse(request.responseText);
                    for(var i=0;i<json.length;i++){
                        console.log(json[i].name);
                    }
                    console.log(json);
                }
            }
       }
    </script>

方法二

通过ajax获取json

    var Ajax = function ()
    {
        $.getJSON ("demo.json", function (data)
        {
            $.each (data, function (i, item)
            {
               console.log(item.name);
            });
        });
    }();

$.ajax({
                url: "demo.json",//json文件位置，文件名
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                success: function(data) {//请求成功完成后要执行的方法 
                   //给info赋值给定义好的变量
                   var pageData=data;
                   for(var i=0;i<data.length;i++){
                       console.log(pageData[i].name);
                   }
                }
            })

方法三

工程化开发时（webpack/parcel）等，可以用import导入

import xx from 'xxx.json'
//文件后缀可省略，如
import xx from 'xxx'

————————————————
版权声明：本文为CSDN博主「ClearLoveQ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ClearLoveQ/article/details/90480207