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 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
基于jquery编写分页插件
Mar 07 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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 IE中下载附件问题解决方法
2014/01/07 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
图片完美缩放
2006/09/07 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
Js获取事件对象代码
2010/08/05 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python正则表达式学习小例子
2020/03/03 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
详解Python IO编程
2020/07/24 Python
如何高效率的查找一个月以内的数据
2012/04/15 面试题
施工资料员的岗位职责
2013/12/22 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书