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

时间 2019-11-08

标签 jQuery jquery 本地 json 读取遍历栏目 JQuery 繁體版

原文原文链接

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

如今Excel、csv等二维表转json都能在线完成，json真的还比xml方便。html

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

我须要将相似这样的学生信息表，固然你也能够想像成这是个数据库的一张表：jquery

在网页中打印出来：android

具体作法以下：ios

一、首先将你的二维表导成excel文件，.csv就最好。Excel也能够另存为.csv的：web

而后在某度找个转json工具：ajax

将二维表转成以下的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来读。json

二、而后新建一个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文件了。

三、下面关键是在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数组中的其中的一个元素。