2. 程式人生 > >JSON簡介及前端簡單解析(一)

JSON簡介及前端簡單解析(一)

阿新 • • 發佈：2018-12-10

JSON現在常用來做前後端資料互動，兩個蝴蝶飛只是簡單的對JSON做一下講解和簡單使用。關於JSON,我還了解的遠遠不夠。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"菜鳥教程"（所舉例子和思路大部分改編於此）和"JSON官網"（圖片來源），所有的資料大部分是兩者提供，為了方便書寫，故不一一指名出處，請諒解，非常抱歉。

上一章簡單介紹了Struts2實現JSON和Ajax操作(十四),如果沒有看過，請觀看上一章

一  JSON的簡單概述

JSON,全稱是JavaScript Object Natotion(JavaScript 物件表示法)，是儲存和交換文字資訊的語法。與XML類似。但JSON 比 XML 更小、更快，更易解析。是輕量級的，且具有自我描述性，更好地理解。

JSON 獨立於語言：JSON 使用 Javascript語法來描述資料物件，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支援許多不同的程式語言。 目前非常多的動態（PHP，JSP，.NET）程式語言都支援JSON。

JSON從描述上看，是Java Script物件的表示法，所以與Java Script有非常密切的聯絡。JSON 文字格式在語法上與建立 JavaScript 物件的程式碼相同。由於這種相似性，無需解析器，JavaScript 程式能夠使用內建的 eval() 函式，用 JSON 資料來生成原生的 JavaScript 物件。

JSON檔案的字尾名是.json, MIME型別為: application/json。

MIME(Multipurpose Internet Mail Extensions)多用途網際網路郵件擴充套件型別。是設定某種副檔名的檔案用一種應用程式來開啟的方式型別，當該副檔名檔案被訪問的時候，瀏覽器會自動使用指定應用程式來開啟。多用於指定一些客戶端自定義的檔名，以及一些媒體檔案開啟方式。

二   JSON與XML的區別

二.一  與 XML 相同之處

  • JSON 是純文字
  • JSON 具有"自我描述性"（人類可讀）
  • JSON 具有層級結構（值中存在值）
  • JSON 可通過 JavaScript 進行解析
  • JSON 資料可使用 AJAX 進行傳輸

二.二  與 XML 不同之處

  • 沒有結束標籤
  • 更短
  • 讀寫的速度更快
  • 能夠使用內建的 JavaScript eval() 方法進行解析
  • 使用陣列
  • 不使用保留字

二.三   Ajax方面具體說明

對於 AJAX 應用程式來說，JSON 比 XML 更快更易使用：

使用 XML (在資料訊息互動方面，用XML過多)

  • 讀取 XML 文件
  • 使用 XML DOM 來迴圈遍歷文件
  • 讀取值並存儲在變數中

使用 JSON (在資料傳遞方面,特別是前後臺數據互動方面)

  • 讀取 JSON 字串
  • 用 eval() 處理 JSON 字串

三   JSON的單值處理 （均用JSP講解，故要建立一個Web動態工程(eclipse)）

JSON的單值處理方式很簡單， 就是簡單的{key:value}  形式,且只有這一個。 用{} 進行括起來。相當於key=value形式。

其中key值表示的是key,value表示的是值。 類似於Map鍵值對的方式。 其中value可以取值的型別有:

有字串型別，數字型別，布林型別(true,false),null 和物件型別，陣列型別，(下面會單獨講，意思是可以互相巢狀)。

三.一  數字型別

在index.jsp頁面中，建立一個簡單的JSON的頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.0.min.js"></script>
<title>兩個蝴蝶飛對JSON的不深入瞭解</title>
<script>
	$(function(){
		//寫具體的操作
	})
</script>
</head>
<body>
	<h2>關於JSON的學習</h2>
	<div id="myjson">
		<span id="single"></span>
		<span id="name"></span>
		<span id="age"></span>
		<span id="sex"></span>
	</div>
</body>
</html>

1.單數字時:

            //定義成json物件，用{} 拓起來
		var obj={"age":23};
		$("#age").text(obj.age);

 2.也可以將23用雙引號括起來，即

var obj={"age":"23"};
		$("#age").text(obj.age);

但這個時候，表示的是字串23,並不是數字23.

3.也可以將age不括起來，即

var obj={age:"23"};
		$("#age").text(obj.age);

4. {"age":23} 相當於為age=23。

5. 至於修改和刪除，新增等操作，用下面的物件來解釋。這裡暫時不解釋了。

三.二  字串型別

            //定義成json物件，用{} 拓起來
		var obj={"name":"兩個蝴蝶飛"};
		$("#name").text(obj.name);

 

 2. 如果將後面的字串值去掉"" ,即

var obj={"name":兩個蝴蝶飛};
		$("#name").text(obj.name);

 這樣會報錯的，頁面上也不會顯示出值。 所以，如果value是非數字型別，那麼應該用"" 括起來。

不要以為沒有彈出框就不是報錯，用F12開啟開發者模式看一下

3. 現在取出的值是obj.name, 如果寫錯了，即寫成obj.age, 並不存在的值，

var obj={"name":"兩個蝴蝶飛"};
		$("#name").text(obj.age);

頁面上不會報錯，但什麼東西都不會顯示的

三.三   布林型別值 true,false

            var obj={"sex":true};
		if(obj.sex){
			console.log("性別是男");
		}else{
			console.log("性別是女");
		}

裡面的true為布林型別值，重新整理頁面，控制檯輸出:

 可以取出值來直接放在if中進行判斷。

2. 有的說，將true 變成"false", 是字串型別的，為什麼還列印輸出呢?

//定義成json物件，用{} 拓起來
		var obj={"sex":"false"};
		if(obj.sex){
			console.log("性別是男");
		}else{
			console.log("性別是女");
		}

這個時候，輸出的是

性別也是男，並不是女。  因為這個時候，false為字串值。 obj.sex時，取出的是字串型別的false。 所以仍然列印性別是男。 (js判斷if條件為false的情況: 

邏輯物件無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN，那麼if判斷 false ，其他為true

)

字串型別的false,與布林型別的false,並不一樣。

var obj={"sex":"false"};
		console.log(typeof(obj.sex));

 上面的例子也就是: (以下均不截圖了)

            if("false"){
			console.log("性別是男"); //輸出為男
		}else{
			console.log("性別是女");
		}

3. 如果想讓其判斷為女，那麼就需要用字串去判斷條件了。 (以下均不截圖了)

//定義成json物件，用{} 拓起來
		var obj={"sex":"false"};
		console.log(typeof(obj.sex));
		if(obj.sex!="false"){
			console.log("性別是男");
		}else{
			console.log("性別是女"); //輸出性別是女
		}

三.四   值為null

//定義成json物件，用{} 拓起來
		var obj={"money":null};
		console.log("型別是:"+typeof(obj.money));  //object
		console.log(obj.money); //null, 並不是什麼都不顯示
		if(obj.money){
			console.log("有錢");
		}else{
			console.log("沒有錢"); //null為false, 顯示為沒有錢
		}

四   值為單個物件 {} (即Java 中JavaBean形式)

上面只有一個屬性，很難表示一個物件的完整資訊，也是無法表示出來的。 故可以在{} 封裝多個物件。 單個值表示也是用:進行分隔，但值與值之間用,進行分隔。

//定義成json物件，用{} 拓起來
		var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
		console.log("型別:"+typeof(obj));  //為object
		$("#name").text(obj.name);
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

 

 在取值的時候，只要相應的.key就行了。

四.二   有人說，會見過這種模式,

var obj={"person":{"name":"兩個蝴蝶飛","age":24,"sex":"男"}};

即現在後面的value值，並不是單純的一個數字，而是一個物件。 這種表示實際上三.四  兩種方式的結合使用。{"person":value},

value是一個單個物件。

這個時候取值只要將前面的person帶上即可。 先找到對應的key(person), 找到Key之後，繼續找裡面的key。 巢狀使用

//定義成json物件，用{} 拓起來
		var obj={"person":{"name":"兩個蝴蝶飛","age":24,"sex":"男"}};
		console.log("型別:"+typeof(obj));  //為object
		$("#name").text(obj.person.name); //正常取的方式,這種才會顯示(採用)
		$("#age").text(obj.person.money); //沒有money值，不出錯，但也不會顯示
		$("#sex").text(obj.sex);//是找不到男這個值 的。不出錯，也不會顯示

 四.三  新增物件屬性

                var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
		console.log("型別:"+typeof(obj));
		//新增一個物件屬性為money
		obj.money="新新增的money屬性";
		$("#name").text(obj.money); //取出的值為:新新增的money屬性
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

 讓JSON物件新.一個要新增的屬性即可。 即obj.name="要新增的值";

所以有的時候，如果新增的層次較多的話，可以這樣新增.

                var obj={};
		obj.name="兩個蝴蝶飛";
		obj.age=24;
		obj.sex="男";
		$("#name").text(obj.name);
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

 四.四  修改物件屬性

	//定義成json物件，用{} 拓起來
		var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
		console.log("型別:"+typeof(obj));
		//修改名稱的值  直接用=號
		obj.name="兩個蝴蝶飛啊飛啊";  
		$("#name").text(obj.name);  //取出的值為:兩個蝴蝶飛啊飛啊
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

修改物件用取出的值="新值"; 即可。

要改變的值存在的話，為修改。 不存在的話， 為新增。

四.五  刪除物件屬性

//定義成json物件，用{} 拓起來
		var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
		console.log("型別:"+typeof(obj));
		//刪除一個屬性
		delete obj.age;
		$("#name").text(obj.name);
		$("#age").text(obj.age); // 被刪除了，無法取出
		$("#sex").text(obj.sex);

 這個時候，就會刪除掉age這個屬性。

如果是:

            //刪除obj
		delete obj;

 這個時候，是並不會刪除的obj物件的。 obj.name,obj.age,obj.sex是依舊可以取出的。只能 delete 物件.屬性。

五   陣列物件 Array  用[  ]括起來,用索引取出值

簡單來說，常見的陣列物件可以分為兩種，第一種，是單值的情況。第二種，是物件情況。

五.一  單值陣列

1. 放置同一種類型的

var obj=[12,24,36,48];

取出值時，用索引下標進行取出。

                //定義成json陣列物件，用[]拓起來
		var obj=[12,24,36,48];
		console.log(obj[0]); //12
		console.log(obj[obj.length-1]); //48
		console.log(obj[obj.length]);//undefined

2 .其中，放置的值可以為同一個型別的，也可以為不同的型別的。

//定義成json陣列物件，用[]拓起來
		var obj=["兩個蝴蝶飛",24,false,true,null,"男"];
		console.log(obj[0]); //兩個蝴蝶飛
		console.log(obj[obj.length-1]);//男
		console.log(obj[obj.length]);//undefined

這裡面的值有字串，數字，布林值，還有null。

3. 也可以放置物件型別

//定義成json陣列物件，用[]拓起來
		var obj=["兩個蝴蝶飛",24,false,true,null,{'name':'兩個蝴蝶飛','age':24,'sex':'男'}];
		console.log(obj[0]);//兩個蝴蝶飛
		console.log(obj[obj.length-1].name);//兩個蝴蝶飛
		console.log(obj[obj.length-1].age);//24

 五.二  物件陣列

裡面的值放置多個物件，是第一種單值的變形體。很常用的一種方式 (即Java 中List<JavaBean> 形式)

當然裡面也可以進行巢狀，但這裡只是簡單的形式。

                var obj = [
			{'name':'慧芳','age':28,'sex':'女'}, 
			{'name':'莉莉','age':26,'sex':'女'}, 
			{'name':'兩個蝴蝶飛','age':24,'sex':'男'}
		];

一般常見寫成key:value 形式，即將array寫成value形式

            var obj = {"persons":
			[{'name':'慧芳','age':28,'sex':'女'}, 
			{'name':'莉莉','age':26,'sex':'女'}, 
			{'name':'兩個蝴蝶飛','age':24,'sex':'男'}]
		};

五.三  物件陣列的輸出

第一種形式輸出:

            // 第一種形式
		for(var i=0;i<obj.persons.length;i++){
			// 不要寫成 var p=obj.persons[i], 然後p.name (這是錯誤的)
			console.log(obj.persons[i].name);
			console.log(obj.persons[i].age);
			console.log(obj.persons[i].sex);
		}

第二種形式輸出:

                // 第二種形式
		for(var p in obj.persons){
			//都是先取出obj.persons[p]
			console.log(obj.persons[p].name);
			console.log(obj.persons[p].age);
			console.log(obj.persons[p].sex);
		}

3. 上面是JSON常見的兩種形式輸出，當成Jquery進行整合之後，可以用Jquery的迴圈遍歷進行輸出

 // 第三種形式, each形式迴圈遍歷輸出       
$.each(obj.persons,function(n,value){
			console.log(value.name);
			console.log(value.age);
			console.log(value.sex);
		})

六  JSON形式字串複雜格式

json物件之間可以相互的巢狀，可以物件與陣列巢狀，也可以物件與單值巢狀，也可以單值與陣列進行巢狀。

有時候，巢狀的時候很容易出錯。 可以利用工具進行相應的解析和驗證。

在解析的時候，也要慢慢的進行相應的解析，層層進行解析。

七   JSON物件與JSON字串之間相互轉換

七.一   JSON物件轉換成JSON字串

1.  var result=JSON.stringify(obj);

七.二      JSON字串轉換成JSON物件

1. var obj= JSON.parse(result)

2.   var obj= $.parseJSON(result)

3.   var obj=eval('(' + result + ')');

在解析和遍歷時，要注意巢狀的順序。

謝謝!!!

相關推薦

JSON簡介及前端簡單解析(一)

JSON現在常用來做前後端資料互動，兩個蝴蝶飛只是簡單的對JSON做一下講解和簡單使用。關於JSON,我還了解的遠遠不夠。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"菜鳥教程"（所舉例子和思路大部分

Android開發：JSON簡介及最全面解析方法(Gson、AS自帶org.json、Jackson解析)

目錄 JSON簡介&解析方法介紹.png 定義 JavaScript Object Notation，JavaScript的物件表示法，是一種輕量級的文字資料交換格式。 作用 用於資料的標記、儲存和傳輸。 特點 輕量級的文字資料交換格式 獨立於語言和平臺 具有自我描述性 讀寫速度快，解析簡單 語法

大資料學習階段及內容簡單介紹(一)

大資料學習階段(一) Java SE 為什麼要選擇java 　零基礎剛接觸大資料的學員都知道，學習大資料課程之前，都需要先熟悉掌握一種計算機程式語言。要知道大資料開發需要程式語言作為基礎，因為大資料的開發基於一些常用的高階語言。大資料中的很多框架都是建立在Java語言的基礎上的，可以

Java---設計模組（設計模組的簡介及最簡單的倆個單例程式碼加測試）

設計模式學習概述： ★ 為什麼要學習設計模式 1、設計模式都是一些相對優秀的解決方案，很多問題都是典型的、有代表性的問題，學習設計模式，我們就不用自己從頭來解決這些問題，相當於在巨人的肩膀上，複用這些方案即可。 2、設計模式已經成為專業人士的常用詞彙，不懂

SpringMVC 異常處理 返回異常code及前端AJAX解析

後端： 統一異常處理器 @ControllerAdvice public class DefaultExceptionHandler { @ExceptionHandler(value =

Json介紹及Jsoncpp簡單使用（測試程式碼+測試例項）

Json介紹及Jsoncpp簡單使用 Json介紹 JSON是一種輕量級的資料交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。它基於JavaScript Programming Language, Standard ECMA-262 3rd Editi

後臺傳遞list和map的json資料在前端的解析

今年企業對Java開發的市場需求，你看懂了嗎？ >>>   

vue系列---響應式原理實現及Observer原始碼解析(一)

閱讀目錄 一. 什麼是響應式？ 二：如何偵測資料的變化？ 2.1 Object.defineProperty() 偵測物件屬性值變化 2.2 如何偵測陣列的索引值的變化 2.3 如何監聽陣列內容的增加或減少？ 2.4 使用Proxy來實現資料監聽 三. Observer原始碼解析

C#可擴展編程之MEF學習筆記（一）：MEF簡介及簡單的Demo（轉）

com ring this exec hosting code .cn 引用 展開 在文章開始之前，首先簡單介紹一下什麽是MEF，MEF,全稱Managed Extensibility Framework（托管可擴展框架）。單從名字我們不難發現：MEF是專門致力於解決擴展性

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度 時間 網站開發 clas jetbrains 常用 目錄 學習資料 簡介 安裝Node.js npm簡介 開發工具 Sublime Node.js開發環境配置 擴展：安裝多版本管理器 學習資料 　　1.深入淺出Node.j

MyBatis學習（一）簡介及入門案例

結果集 提交 ace 支持 nag 實例 exce 空間 cti 1.什麽是MyBatis？ 　　MyBatis是一個支持普通SQL查詢，存儲過程，和高級映射的優秀持久層框架。MyBatis去掉了幾乎所有的JDBC代碼和參數的手工設置以及對結果集的檢索封裝。MyBatis可

國際版Azure搭建Windows多種類型VPN_一.簡介及安裝服務

azure vpn 很多時候我們需要一個穩定安全而且多種類型的VPN，以下是本次實驗的拓撲圖，實現SSTP和L2TP VPN。SSTP需要證書SSL來實現，而L2TP則是通過密鑰共享來實現（此連接方法適合與移動設備，不過安全性不夠SSTP好）。一.Azure 創建虛擬機登錄國際版Azure：htt

Android中三種常用解析XML的方式（DOM、SAX、PULL）簡介及區別

字符串 lan win name屬性 Coding 空間 toc log fin XML在各種開發中都廣泛應用，Android也不例外。作為承載數據的一個重要角色，如何讀寫XML成為Android開發中一項重要的技能。今天就由我向大家介紹一下在Android平臺下幾種常見的

C#中的IEnumerable簡介及簡單實現實例

list orm 替換 valid src move codes 更新 使用 IEnumerable這個接口在MSDN上是這麽說的，它是一個公開枚舉數，該枚舉數支持在非泛型集合上進行簡單的叠代。換句話說，對於所有數組的遍歷，都來自IEnumerable，那麽我們就可以利用

web前端開發過程遇到的問題及解決方式（一）

樣式優先級 語句 前端 port web前端開發 css樣式 重復 fun clas 1. CSS樣式優先級問題 1 <style> 2 3 .className input(可換其他元素){ 4 5 type:val !importa

從零開始Rtklib解讀篇-簡單的程式設計理論和演算法及結構分析（一）

Rtklib一直開源，資源比較容易找到，功能也非常強大。因為專業有點相關，但是之前不用這個平臺，一直未能好好沉下心來學習，然而學到用時方恨少。這個系列也算是自己的一個小小的總結吧，因為我對VS、對Rtklib、對演算法的理解也比較淺，很多內容未必正確，寫的時候也不一定非常有條理，不當之處，還請指出並

java簡單解析json

一、什麼是JSON？ JSON是一種取代XML的資料結構,和xml相比,它更小巧但描述能力卻不差,由於它的小巧所以網路傳輸資料將減少更多流量從而加快速度。 JSON就是一串字串 只不過元素會使用特定的符號標註。 {} 雙括號表示物件 [] 中括號表示陣列 "" 雙引號內是屬性或值

PVALN（私有vlan）簡介及簡單實驗筆記

Pvlan 分為primary vlan（主）和secondary vlan（從）   Secondary vlan又分為community vlan（團體vlan）與isolated vlan（隔離valn）   特性： Community vlan（團體vlan）相同，內

在8位微控制器上實現JSON資料的簡單解析（微控制器解析JSON）

https://blog.csdn.net/PZ0605/article/details/56017141 由於在一些低配的微控制器上面不能直接使用C提供的系統庫，專案中又需要解析伺服器返回的JSON資料，以下程式碼可以簡單的解析出JSON資料中的key: // //  main.

SpringBoot Jack Json 返回前端時間少一天的問題

前倆天在專案中遇到一個問題，時間在資料庫是正常的 但是返回前端的時候卻少了一天；查詢了一下是JackJson 的問題 那麼如何解決這個問題呢？ 我們只需要在。yml中對jackjson 進行配置就好 jackson: serialization: #格式化輸出