文档章节

【jQuery】jQuery对本地json的读取和遍历

yongh701
 yongh701
发布于 2018/05/15 22:46
字数 933
阅读 752
收藏 5

有时候,我们想写写一个跨平台的单机小程序、小软件,自然就会想到HTML5,但我们又不想运用服务器或者数据库这么重型的东西,自然就会想到用json或者xml来存些持久化数据,让我们的小程序加载。xml就不要想了,除了各种浏览器的兼容问题,Google还不支持读本地的xml,非要人配置程序或者挂到服务器,至少是localhost上运用ajax不可。所以自然想到用json来存我们的小东西。

现在Excel、csv等二维表转json都能在线完成,json真的还比xml方便。

下面就用一个小例子来说明这个问题。

我需要将类似这样的学生信息表,当然你也可以想像成这是个数据库的一张表:

在网页中打印出来:

具体做法如下:

1、首先将你的二维表导成excel文件,.csv就最好。Excel也可以另存为.csv的:

然后在某度找个转json工具:

将二维表转成如下的json,并且给他一个变量名,保存成.js文件,我这里是student_info.js:

var student =  [ 
	{ 
	"name":"张国立", 
	"sex":"男", 
	"email":"zhangguoli@123.com"
	}, 
	{ 
	"name":"张铁林", 
	"sex":"男", 
	"email":"zhangtieli@123.com"
	}, 
	{ 
	"name":"邓婕", 
	"sex":"女", 
	"email":"zhenjie@123.com"
	} 
]

其意义就是这个student将直接被当作一个变量给js来读。

2、然后新建一个aaa.html,也就是最后呈现给别人看,让别人点开就能用的网页。反正最后的整个程序的目录结构如下:

这样意义可大了,你的程序就将由一个都不需要布置在服务器的html+js的文件夹,可以在pc直接点开就能看,也可以用这个镶嵌在android app或者ios app的webview里面直接呈现。三个平台就这样一套简单的代码。HTML5镶嵌在android可以参考《【Android】检测是否处于Wifi环境,利用WebView实现浏览器app》(https://blog.csdn.net/yongh701/article/details/46895439),ios则是《【iOS】WebView的使用、Javascript和Objective-C的交互》(https://blog.csdn.net/yongh701/article/details/75093266)。

这样我们就不用要用户允许执行activeXObject,或者有js读取本地文件报错,让用户困惑的事情了。你就可以用js文件当数据库来用了。W3C对js对文件的读写限制只能出此下策,让js读本地的json文件了。

3、下面关键是在aaa.html中读到student_info.js的json,如下代码如下:

<html>  
<head>  
	<meta http-eqiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="jquery.min.js"></script>  
	<script src="student_info.js"></script>  
</head>
<body>  
    <table border="1"></table>
	<script>
		for(var i in student){  	
			var one_student=student[i];
			$("body>table").append("<tr id="+i+"></tr>");
			for(var j in one_student){
				$("#"+i).append("<td>"+one_student[j]+"</td>");
			}
		} 
	</script> 
</body>  
</html>  

这里的jquery.min.js是jquery1.11,其实1.8.3以后的jquery1都差别不大。

先是在第5行引入我们存json的js文件student_info.js,相当于将上面那段json直接复制过来,给这个aaa.html声明一个这样长长的json,但经过我们这样独开一个文件这个存json,代码好维护了很多了。

接着,其实这样的json本身就是一个二维表来的嘛,我们用一个双重遍历,层层剥开,就能放到html上面了嘛。这里用两个for in 再配合《【jQuery】对网页节点的增删改查》(https://blog.csdn.net/yongh701/article/details/46480749)的内容就好了嘛。

只是注意,这里的jQuery的for in不是像php的for each或者java的for :,他 for(var i in XX),这个i只是一个0~n的数字,你需要XX[i]才能拿到这个XX数组中的其中的一个元素。

 

 

 

© 著作权归作者所有

yongh701
粉丝 27
博文 17
码字总数 10682
作品 0
佛山
私信 提问
【JavaScript】自制的Excel变Json工具

有时候我们需要将Excel的内容变成Json,虽然这些工具在如同在《【jQuery】jQuery对本地json的读取和遍历》(https://my.oschina.net/u/3776619/blog/1813174)所提到的,网上一搜一大把,但是...

yongh701
2018/09/01
58
0
jquery grep()筛选遍历数组

转自:http://www.wufangbo.com/jquery-each-json/ jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value)......

GeminiLiu
2014/02/12
1K
0
jQuery中的Ajax----02

一、$.getScript()方法 有时候,在页面初次加载时就得所需的全部javascript文件是完全没有必要的。虽然可以在需要哪个javascript文件时,动态地创建<script>标签,jquery代码如下: $(docu...

指尖跳动的精灵
2015/03/09
36
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
58
0
如何使用jquery处理json数据

如摘要所说,json是常用的前后端交互的数据格式,本文简单介绍jquery如何解析json数据,以备忘。 如下是一个嵌套的json: [{"name":"20:00-21:15","price":"1.00"},{"name":"17:30-17:59","......

fzxu_05
2014/03/04
548
0

没有更多内容

加载失败,请刷新页面

加载更多

友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
4
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
3
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
3
0
分页查询

一、配置 /*** @author beth* @data 2019-10-14 20:01*/@Configurationpublic class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor(){ ......

一个yuanbeth
昨天
6
0
在LINQPad中使用Ignite.NET

LINQPad是进行.NET开发的一款优秀工具,非常有利于Ignite.NET API的快速入门。 入门 下载LINQPad:linqpad.net/Download.aspx,注意要选择64位操作系统的AnyCPU版本; 安装Ignite.NET的NuGet...

李玉珏
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部