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 相关文章推荐
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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 中执行系统外部命令
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php 邮件发送问题解决
2014/03/22 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
vue 组件销毁并重置的实现
2020/01/13 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python怎么提高计算速度
2020/06/11 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
服装厂厂长职责
2013/12/16 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
基层党员对照检查材料
2014/08/25 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年团队工作总结
2014/11/24 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python