zoukankan      html  css  js  c++  java
  • 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,免得再次加载不了刚刚修改的相关文件

    声明:

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

  • 相关阅读:
    IBoutlet 学习笔记
    Stirng str1 = new String("abc");Stirng str2 = new String("abc");创建了几个对象
    readonly strong nonatomic 和IBOutlet
    MAC技巧,让mac和windows之间识别硬盘
    Eclipse Retina 视网膜屏 设置
    PList
    三种方法更改MAC OS X下的HOSTS文件
    第一个Dart程序HelloDart
    第三个Dart程序扩展(访问lib文件里的成员变量)
    初识Dart
  • 原文地址:https://www.cnblogs.com/dgz-bb1304/p/13903412.html
Copyright © 2011-2022 走看看