js通过ajax读取本地json文件

最新推荐文章于 2023-11-22 17:16:53 发布

原创最新推荐文章于 2023-11-22 17:16:53 发布 · 1w 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

原生JavaScript

当前文章被收录于：

原生JavaScript

59 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用AJAX异步读取本地JSON文件的方法，并通过回调函数处理返回的数据。实例代码展示了如何利用XMLHttpRequest对象设置MIME类型为application/json，打开GET请求并监听readyState变化，最终解析响应文本并输出。

实例代码：

function readJSON(file, callback) {  
    let ajax = new XMLHttpRequest();  
    ajax.overrideMimeType("application/json");  
    ajax.open("GET", file, true);  
    ajax.onreadystatechange = function() {  
        if (ajax.readyState === 4 && ajax.status == "200") {
            callback(ajax.responseText);
        }  
    }  
    ajax.send(null);  
}


readJSON("./json/data.json", function(res){  
    let data = JSON.parse(res);  
    console.log(data);
});

本地测试时请开启本地服务，readJSON的第一个参数是json文件的路径，第二个参数是回调函数。

标签

#js读取本地json文件