JSON 教程

来源:http://www.cnblogs.com/Renyi-Fan/archive/2017/09/07/7490071.html
-Advertisement-
Play Games

JSON 教程 說明: 可以自己百度JSON解析器來查看自己寫的JSON是否正確。 參考: JSON 教程http://www.w3school.com.cn/json/index.asp JSON 教程 | 菜鳥教程http://www.runoob.com/json/json-tutorial. ...


JSON 教程

說明:

可以自己百度JSON解析器來查看自己寫的JSON是否正確。

 

參考:

JSON 教程
http://www.w3school.com.cn/json/index.asp

JSON 教程 | 菜鳥教程
http://www.runoob.com/json/json-tutorial.html

 


 

JSON:JavaScript 對象表示法(JavaScript Object Notation)。

JSON 是存儲和交換文本信息的語法。類似 XML。

JSON 比 XML 更小、更快,更易解析。

每一章中用到的實例

{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

這個 employee 對象是包含 3 個員工記錄(對象)的數組。

什麼是 JSON ?

  • JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation)
  • JSON 是輕量級的文本數據交換格式
  • JSON 獨立於語言 *
  • JSON 具有自我描述性,更易理解

* JSON 使用 JavaScript 語法來描述數據對象,但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。

JSON - 轉換為 JavaScript 對象

JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。

由於這種相似性,無需解析器,JavaScript 程式能夠使用內建的 eval() 函數,用 JSON 數據來生成原生的 JavaScript 對象。

 


 

親自試一試 - 實例

通過我們的編輯器,您可以線上編輯 JavaScript 代碼,然後通過點擊一個按鈕來查看結果:

<html>
<body>
<h2>在 JavaScript 中創建 JSON 對象</h2>

<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>

<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>

</body>
</html>

親自試一試

類似 XML

  • JSON 是純文本
  • JSON 具有“自我描述性”(人類可讀)
  • JSON 具有層級結構(值中存在值)
  • JSON 可通過 JavaScript 進行解析
  • JSON 數據可使用 AJAX 進行傳輸

相比 XML 的不同之處

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

為什麼使用 JSON?

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

使用 XML

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

使用 JSON

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

JSON 語法是 JavaScript 語法的子集。

 


 

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。

  • 數據在名稱/值對中
  • 數據由逗號分隔
  • 花括弧保存對象
  • 方括弧保存數組

JSON 名稱/值對

JSON 數據的書寫格式是:名稱/值對。

名稱/值對包括欄位名稱(在雙引號中),後面寫一個冒號,然後是值:

"firstName" : "John"

這很容易理解,等價於這條 JavaScript 語句:

firstName = "John"

JSON 值

JSON 值可以是:

  • 數字(整數或浮點數)
  • 字元串(在雙引號中)
  • 邏輯值(true 或 false)
  • 數組(在方括弧中)
  • 對象(在花括弧中)
  • null

JSON 對象

JSON 對象在花括弧中書寫:

對象可以包含多個名稱/值對:

{ "firstName":"John" , "lastName":"Doe" }

這一點也容易理解,與這條 JavaScript 語句等價:

firstName = "John"
lastName = "Doe"

JSON 數組

JSON 數組在方括弧中書寫:

數組可包含多個對象:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

在上面的例子中,對象 "employees" 是包含三個對象的數組。每個對象代表一條關於某人(有姓和名)的記錄。

JSON 使用 JavaScript 語法

因為 JSON 使用 JavaScript 語法,所以無需額外的軟體就能處理 JavaScript 中的 JSON。

通過 JavaScript,您可以創建一個對象數組,並像這樣進行賦值:

例子

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像這樣訪問 JavaScript 對象數組中的第一項:

employees[0].lastName;

返回的內容是:

Gates

可以像這樣修改數據:

employees[0].lastName = "Jobs";

親自試一試

在下麵的章節,您將學到如何把 JSON 文本轉換為 JavaScript 對象。

JSON 文件

  • JSON 文件的文件類型是 ".json"
  • JSON 文本的 MIME 類型是 "application/json"

 


 

把 JSON 文本轉換為 JavaScript 對象

JSON 最常見的用法之一,是從 web 伺服器上讀取 JSON 數據(作為文件或作為 HttpRequest),將 JSON 數據轉換為 JavaScript 對象,然後在網頁中使用該數據。

為了更簡單地為您講解,我們使用字元串作為輸入進行演示(而不是文件)。

JSON 實例 - 來自字元串的對象

創建包含 JSON 語法的 JavaScript 字元串:

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由於 JSON 語法是 JavaScript 語法的子集,JavaScript 函數 eval() 可用於將 JSON 文本轉換為 JavaScript 對象。

eval() 函數使用的是 JavaScript 編譯器,可解析 JSON 文本,然後生成 JavaScript 對象。必須把文本包圍在括弧中,這樣才能避免語法錯誤:

var obj = eval ("(" + txt + ")");

在網頁中使用 JavaScript 對象:

例子

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

親自試一試

JSON 解析器

提示:eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換為 JavaScript 對象是更安全的做法。JSON 解析器只能識別 JSON 文本,而不會編譯腳本。

在瀏覽器中,這提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。

Web 瀏覽器支持Web 軟體支持
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • jQuery
  • Yahoo UI
  • Prototype
  • Dojo
  • ECMAScript 1.5

親自試一試

對於較老的瀏覽器,可使用 JavaScript 庫: https://github.com/douglascrockford/JSON-js

JSON 格式最初是由 Douglas Crockford 制定的

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1,首先從官方網站下載安裝Node.js,建議使用6.x版本,同時也會一併安裝npm工具,npm>3.10以上。 2,npm安裝很慢(國外伺服器),所以一般推薦使用npm淘寶鏡像cnpm,先安裝下cnpm: 安裝好cnpm後,以後使用npm的地方就可以使用cnpm替代了 3、全局安裝vue-cli ...
  • 2 ...
  • 最近學習angular2,於是從官網的hero例子開始學習。經過幾番周折終於完成了這個例子。收益匪淺。個人建議在開始學習例子前可以先瞭解一些概念,模塊,組件,裝飾器.....,有助於寫代碼時候的邏輯。說一下我在學習時遇到的問題: 1.首先附上中文的官方教程鏈接:https://www.angular ...
  • ##字元串## 字元串: 由0個或多個字元組成,被成對的英文單引號或雙引號包含起來的。 字元編碼: 每一個字元在電腦存儲的編號。 電腦會保存有一套或幾套用於標註編號與字元對應關係的字典。(字元集) 電腦存儲單位 位:bit->0/1能存2個字 位元組:byte->8bit可存256個不同的字。 ...
  • 1. 安卓下大面積觸摸會導致觸發touchmove的問題 判斷一下touchstart的上一次位置和當前位置是否一樣,一樣就使move return掉 <body> <div class="page"> <div id="box"></div> </div> <script type="text/j ...
  • 工作中需要將一個左邊的設計好的控制項,拖拽到右邊的面板中,同時保持右邊面板中的控制項自由排序,這時候就需要及支持拖拽又支持排序的操作了, Demo截圖:從左邊控制項拖到右邊區域 代碼段: Html 代碼: ...
  • JSON的android應用實例 Json線上解析器 1、普通鍵值對象 2、Json數組對象 3、Json數組對象 ...
  • Android icon尺寸 密度範圍 切圖比例(以mdpi為基準) 切圖比例(以xxxhdpi為基準) 圖標尺寸 外間距 ((圖標尺寸-圖片尺寸)/2) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...