JSON使用教程

說明

   JSON:Javascript對象表示法(Javascript Object Notation)。JSON是存儲和交換文本信息的語法。類似XML。但比XML更小、更快、更易解析。

1、創建JSON對象,並在網頁上顯示信息

  JavaScript代碼
  <html>
  <body>
  <h2>在 JavaScript 中創建 JSON 對象</h2>
  <!--span是內聯樣式,寫在span元素裏面的內容不換行,後面跟了個<br />換行符纔會換行,這裏的作用是將下面通過id獲取的JavaScript對象將要顯示的內容追加在此處-->
  <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">
  //定義JSON對象
  //對象包含4個變量(字段),name、street、age、phone
  var JSONObject= {
  "name":"Bill Gates",
  "street":"Fifth Avenue New York 666",
  "age":56,
  "phone":"555 1234567"};
  //通過id獲取JavaScript對象,並在頁面中顯示JSONObject中的變量值
  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>

結果:網頁中顯示

 

2、JSON的語法介紹

(1)JSON名稱/值對

  名稱/值對包括字段名稱(在雙引號中),後面寫一個冒號,然後跟着字段的值:
  例子:"name":"Bill Gates" 相當於 name="Bill Gates"

(2)JSON值

  JSON的值可以是數字(整數、浮點數)、字符串(在雙引號中)、邏輯值(true或false)、數組(在方括號中)、對象(在大括號中)、null(空值)

(3)JSON對象

  JSON對象寫在花括號(大括號)中,對象可以包含多個名稱/值對:
  { "firstname":"Bill" , "lastName":"Gates" } 相當於 firstname="Bill",lastname="Gates"

(4)JSON數組

  JSON數組寫在方括號中,數組可以包含多個對象:
  {
  "employees": [
  { "firstName":"John" , "lastName":"Doe" },
  { "firstName":"Anna" , "lastName":"Smith" },
  { "firstName":"Peter" , "lastName":"Jones" }
  ]
  }
  其中employees是數組名,fistName、lastName是字段名,兩個字段構成一個對象,每個對象代表一條關於某人的信息(姓和名)。

(5)JSON使用JavaScript的語法

 創建JSON對象數組、並且賦值:
 var employees = [
     { "firstname":"Bill" , "lastname":"Gates" },
     { "firstname":"George" , "lastname":"Bush" },
     { "firstname":"Thomas" , "lastname":"Carter" }
 ];
 訪問數組中的變量值:
 employees[0].lastname;
 返回的內容:
 Gates

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章