【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數組中的其中的一個元素。

相關標籤/搜索

java+jquery+json+ajax

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。