ajax在js脚本文件中导入json文件，并使用文件内容 - Wealter

时间：2024-03-10 16:19:03

ajax在js脚本文件中导入json文件，并使用文件内容

如何在一个单独的js脚本文件中导入json文件中的数据呢？

代码如下

// 这段代码可以导入一个"../static/json/infos.json"文件，
// 并使用json数据，

var text; // 一个变量
$.ajax({
    type: \'get\',  // 请求类型
    url: \'../static/json/infos.json\', // 文件相对地址（相对于使用这个js脚本的html文件）
    dataType: \'json\', // 类型
    async: false,
    success: function(data) {
        text = data; // data就是json文件中的数据，可以直接赋给text，类型为js对象，也就是直接从json数据转换成了js对象
    },
    error: function() {
        alert(\'请求失败\');
    }
})
this.songs = text; // 使用json数据，this.songs 是一个js对象

使用例子

../static/json/infos.json 文件

[{
    "id": 1,
    "title": "\u3072\u3053\u3046\u304d\u96f2",
    "author": "\u5ddd\u672c\u6bd4\u4f50\u5fd7",
    "format": "MPEG Audio",
    "size": "9.068 MB",
    "songUrl": "../static/musics/001.mp3",
    "imageUrl": "../static/images/001.png"
},
{
    "id": 2,
    "title": "Rainbow",
    "author": "\u5317\u5ddd\u52dd\u5229",
    "format": "MPEG Audio",
    "size": "7.824 MB",
    "songUrl": "../static/musics/002.mp3",
    "imageUrl": "../static/images/002.png"
}]

在导入之后，this.songs这个对象为

this.songs = [{
    "id": 1,
    "title": "\u3072\u3053\u3046\u304d\u96f2",
    "author": "\u5ddd\u672c\u6bd4\u4f50\u5fd7",
    "format": "MPEG Audio",
    "size": "9.068 MB",
    "songUrl": "../static/musics/001.mp3",
    "imageUrl": "../static/images/001.png"
},
{
    "id": 2,
    "title": "Rainbow",
    "author": "\u5317\u5ddd\u52dd\u5229",
    "format": "MPEG Audio",
    "size": "7.824 MB",
    "songUrl": "../static/musics/002.mp3",
    "imageUrl": "../static/images/002.png"
}]

然后就可以在这个js脚本文件中快乐的使用this.songs这个对象了

每次测试时，请删除浏览器缓存的cookies，免得再次加载不了刚刚修改的相关文件

声明:

增删有风险，操作要谨慎；凡操作失误，导致的损失，与本人无关；实施操作前请做好安全措施。
谢谢关注！

相关文章