博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【jQuery】jQuery对本地json的读取和遍历
阅读量:7211 次
发布时间:2019-06-29

本文共 1554 字,大约阅读时间需要 5 分钟。

hot3.png

有时候,我们想写写一个跨平台的单机小程序、小软件,自然就会想到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》(),ios则是《【iOS】WebView的使用、Javascript和Objective-C的交互》()。

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

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

    	

这里的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】对网页节点的增删改查》()的内容就好了嘛。

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

 

 

 

转载于:https://my.oschina.net/u/3776619/blog/1813174

你可能感兴趣的文章
mysql事物
查看>>
微软开源代码
查看>>
ssh 实体关系分析确立(ER图-实体关系图)
查看>>
shell语法简单介绍
查看>>
iOS捕获异常,常用的异常处理方法
查看>>
Struts2(九)OGNL标签一与Struts2标签
查看>>
双网卡绑定-bond0
查看>>
利用扩展事件进行调优和Troubleshooting PPT分享
查看>>
finger-guessing game:1场景搭建
查看>>
axure7.0 汉化包下载
查看>>
OC开发_Storyboard——iPad开发
查看>>
NSURLSession使用说明及后台工作流程分析
查看>>
record
查看>>
linux浏览器,邮件客户端,输入法,双屏设置,应用软件,gnome-screenshot/scrot -s截图,office...
查看>>
Mysql修改设置root密码的命令及方法
查看>>
android Graphics(四):canvas变换与操作
查看>>
IOS 生成本地验证码
查看>>
sql duplicate key
查看>>
pip 安装psycopg的错误
查看>>
JNI中的内存管理(转)
查看>>