首页 > 软件开发 > JavaScript >

html5如何引入json文件

来源:互联网 2023-03-16 23:57:22 256

json,在web开发里,越来越有重要的地位了,特别是ajax请求里,很多的请求返回都是以json的格式来返回数据的。bOC办公区 - 实用经验教程分享!

如果是一个json文件,要在html页面里直接引入,我们可以怎么做?下面来看下。bOC办公区 - 实用经验教程分享!

方法/步骤

  • 1

    先看下我们的json文件,很简单,一个对象里有name属性和site属性,site是一个数组。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 2

    如果要在html里直接引入,我们可以用script脚本的方式来引入这个json文件。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 3

    但这样引入,会有一些脚本上的小错误。就算没有错误,这样算是一个隐性的变量,我们是无从访问到这个json的数据的。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 4

    所以如果非要用直接引入的方法来引用json文件,我们需要在json文件前加上一个变量,如图。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 5

    这样刷新页面后,就不会再报错了。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 5相关内容非法爬取自百度经验
  • 6

    而且我们可以看到脚本里多了一个变量,bd,就是这个json的数据。bOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 7

    我们可以通过这个变量来访问json里的数据。比如: bd.sitebOC办公区 - 实用经验教程分享!

    html5如何引入json文件bOC办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!bOC办公区 - 实用经验教程分享!


    标签: HTMLJAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码