这里有新鲜出炉的精品教程,程序狗速度看过来!
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于 JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON 采用完全独立于语言的文本格式,但是也使用了类似于 C 语言家族的习惯(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。这些特性使 JSON 成为理想的数据交换语言。
下面小编就为大家带来一篇 js 读取 json 文件片段中的数据实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在 html 中利用 js 读取动态网站从服务器端返回的数据进行显示
1、js.html 页面
需要引入 执行 jquery 的 js 文件
- <HTML>
- <HEAD>
- <META name=Generator content=EditPlus>
- <META name=Author content="">
- <META name=Keywords content="">
- <META name=Description content="">
- <script src="jquery-1.8.2.min.js">
- </script>
- <script>
- $(function() {
- //$("#loaddata").click(function(){
- $(document).ready(function() {
- //使用getJSON方法读取json数据,
- //注意:info.json可以是不同类型文件,只要其中的数据为json类型即可
- $.getJSON('info.json',
- function(data) {
- var html = '';
- $.each(data,
- function(i, item) {
- html += '<TR><TD>' + item['name'] + '</TD>' + '<TD>' + item['sex'] + '</TD>' + '<TD>' + item.address + '</TD>' + '<TD>' + item['home'] + '</TD></TR>';
- });
- $('#title').after(html);
- //after方法:在每个匹配的元素之后插入内容。
- });
- });
- });
- //注:可以是item.address,也可以是item['address']
- //firefox报 json文件中 "语法错误 [",单能加载数据 //ie chrome 无法加载数据
- </script>
- <INPUT id=loaddata value=加载数据 type=button>
- <TABLE id=infotable>
- <TBODY>
- <TR id=title>
- <TH>
- 姓名
- </TH>
- <TH>
- 性别
- </TH>
- <TH>
- 地址
- </TH>
- <TH>
- 主页
- </TH>
- </TR>
- </TBODY>
- </TABLE>
info.json 文件
- [
- {
- "name":"jb51",
- "sex":"man",
- "address":"hangzhou",
- "home":"http://www.phperz.com"
- },
- {
- "name":"lisi",
- "sex":"wumen",
- "address":"beijing",
- "home":"http://yulu.phperz.com"
- }
- ]
网上下载
jquery-1.8.2.min.js
应用场景 :
定期从数据库中读取的特定记录放到静态页面上去展示,为了减少对数据库访问的压力,把特定记录数取出来存放在 json 中,页面访问链接不用实时请求数据库。
至此可以将 json 中的内容加载到 html 静态也中去。
-------------QA
显示不了中文的确是编码问题,默认保存的 json 肯定是个记事本,然后改后缀名为 json 的,记事本默认编码是 ANSI 的 显示中文自然有问题,
解决方法:打开. json 文件 文件 - 另存为 看到下面编码格式了吧 选择 UTF-8 就可以了。
这里还有个容易出错的地方:
请求 json 文件报 405 错误,明明路径对的 但是还是报错。
解决方法:修改请求方式为 get 请求。
以上这篇 js 读取 json 文件片段中的数据实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0524/326872.html