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 日期常用的方法
Nov 11 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
node.js如何操作MySQL数据库
Oct 29 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vue实现lodop打印功能的示例
2020/11/11 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
浅析python 字典嵌套
2020/09/29 Python
HTTP状态码详解
2021/03/18 杂记
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
先进集体获奖感言
2014/02/13 职场文书
党员干部一句话承诺
2014/05/30 职场文书
事业单位个人总结
2015/02/12 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书