ajax读取本地json文件

最近在学习ajax，发现可以通过ajax读取本地的json数据，并在网页上展示出来，下面我来分享一下我的经验。

首先，在html中引入jquery库和我们需要展示数据的div：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="data"></div>

然后，在js代码中，使用ajax从本地json文件读取数据，并将其展示在div中：

$.ajax({
    url:'data.json',type:'GET',dataType:'json',success:function(data){
        // 将数据展示在页面上
        var html = '';
        for(var i=0;i

上面的代码中，url表示本地json文件的路径，type表示请求方式，dataType表示响应的数据类型。当我们成功读取到数据后，就将其展示在html变量中，并使用jquery的html方法将其赋值给div的innerHTML属性。

需要注意的是，使用ajax读取本地json文件时需要在本地搭建一个服务器，否则会出现跨域问题。可以使用npm安装http-server并在本地启动一个服务器。

至此，我们就可以通过ajax从本地读取json数据并展示在网页上了。