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

这篇文章主要为大家展示了“js如何读取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":"https://www.jb51.net"
}, 
{ 
"name":"lisi", 
"sex":"wumen", 
"address":"beijing", 
"home":"http://yulu.jb51.net"
} 
]

网上下载

jquery-1.8.2.min.js

应用场景：

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

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

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

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

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

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

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

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

以上是“js如何读取json文件片段中的数据实例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

文章标题：js如何读取json文件片段中的数据实例
本文网址：https://www.cdcxhl.com/article28/pcoojp.html

成都网站建设公司_创新互联，为您提供网站营销、网站导航、动态网站、网页设计公司、用户体验、网站策划

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容