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": "u3072u3053u3046u304du96f2",
    "author": "u5dddu672cu6bd4u4f50u5fd7",
    "format": "MPEG Audio",
    "size": "9.068 MB",
    "songUrl": "../static/musics/001.mp3",
    "imageUrl": "../static/images/001.png"
},
{
    "id": 2,
    "title": "Rainbow",
    "author": "u5317u5dddu52ddu5229",
    "format": "MPEG Audio",
    "size": "7.824 MB",
    "songUrl": "../static/musics/002.mp3",
    "imageUrl": "../static/images/002.png"
}]

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

this.songs = [{
    "id": 1,
    "title": "u3072u3053u3046u304du96f2",
    "author": "u5dddu672cu6bd4u4f50u5fd7",
    "format": "MPEG Audio",
    "size": "9.068 MB",
    "songUrl": "../static/musics/001.mp3",
    "imageUrl": "../static/images/001.png"
},
{
    "id": 2,
    "title": "Rainbow",
    "author": "u5317u5dddu52ddu5229",
    "format": "MPEG Audio",
    "size": "7.824 MB",
    "songUrl": "../static/musics/002.mp3",
    "imageUrl": "../static/images/002.png"
}]

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

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

声明:

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

原文地址:https://www.cnblogs.com/dgz-bb1304/p/13903412.html