js读取json文件片段中的数据实例


Posted in Javascript onMarch 09, 2017

在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":"3water", 
"sex":"man", 
"address":"hangzhou", 
"home":"https://3water.com"
}, 
{ 
"name":"lisi", 
"sex":"wumen", 
"address":"beijing", 
"home":"http://yulu.3water.com"
} 
]

网上下载

jquery-1.8.2.min.js

应用场景 :

定期从数据库中读取的特定记录放到静态页面上去展示,为了减少对数据库访问的压力,把特定记录数取出来存放在json中,页面访问链接不用实时请求数据库。

至此可以将json中的内容加载到html静态也中去。

-------------QA

显示不了中文的确是编码问题,默认保存的json肯定是个记事本,然后改后缀名为json的,记事本默认编码是ANSI的 显示中文自然有问题,

解决方法:打开.json文件 文件 - 另存为 看到下面编码格式了吧 选择UTF-8 就可以了。

这里还有个容易出错的地方:

请求json文件报405错误,明明路径对的 但是还是报错。

解决方法:修改请求方式为get请求。

以上这篇js读取json文件片段中的数据实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
vue实现购物车加减
May 30 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
JavaScript实现动态增删表格的方法
Mar 09 #Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php cookis创建实现代码
2009/03/16 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
常用的javascript function代码
2008/05/23 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
js点击选择文本的方法
2015/02/09 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
js new Date()实例测试
2019/10/31 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Python count函数使用方法实例解析
2020/03/23 Python
python中rc1什么意思
2020/06/19 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python利用platform模块获取系统信息
2020/10/09 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
什么是唯一索引
2015/07/05 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
费用会计岗位职责
2014/01/01 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
委托书格式
2014/08/01 职场文书
银行贷款收入证明
2014/10/17 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫