js讀取并解析JSON類型數(shù)據(jù)的方法

2024-05-06 16:25:06

字體：大中小

來源：轉載

供稿：網(wǎng)友

這篇文章主要介紹了js讀取并解析JSON類型數(shù)據(jù)的方法,具體分析了json格式的功能、用途與JS解析技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js讀取并解析JSON類型數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

一、什么是JSON？

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式，是理想的數(shù)據(jù)交換格式，同時，JSON是 JavaScript 原生格式。
非常適合于服務器與 JavaScript 的交互

二、為什么使用JSON而不是XML

他們都是這樣說的：盡管有許多宣傳關于 XML 如何擁有跨平臺，跨語言的優(yōu)勢，然而，除非應用于 Web Services，否則，在普通的 Web 應用中，開發(fā)者經(jīng)常為 XML 的解析傷透了腦筋，無論是服務器端生成或處理 XML，還是客戶端用 JavaScript 解析 XML，都常常導致復雜的代碼，極低的開發(fā)效率。實際上，對于大多數(shù) Web 應用來說，他們根本不需要復雜的 XML 來傳輸數(shù)據(jù)，XML 的擴展性很少具有優(yōu)勢，許多 AJAX 應用甚至直接返回 HTML 片段來構建動態(tài) Web 頁面。和返回 XML 并解析它相比，返回 HTML 片段大大降低了系統(tǒng)的復雜性，但同時缺少了一定的靈活性

三、如何使用

下面代碼是html代碼片段，實現(xiàn)點擊按鈕解析json格式數(shù)據(jù)并alert內容

復制代碼代碼如下:

下面是js函數(shù)代碼：

var json = {

  contry:{

  area:{

   man:"12萬",

   women:"10萬"

  }

  }

};

//方式一：使用eval解析

var obj = eval(json);

alert(obj.constructor);

alert(obj.contry.area.women);

//方式二：使用Funtion函數(shù)

var strJSON = "{name:'json name'}";//得到的JSON

var obj = new Function("return" + strJSON)();//轉換后的JSON對象

alert(obj.name);//json name

alert(obj.constructor);

//復雜一點的json數(shù)組數(shù)據(jù)的解析

var value1 = [

  {"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},

   {"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},

  {"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}

   ];

var obj1 = eval(value1);

alert(obj1[0].c01);

//復雜一點的json的另一種形式

var value2 = {

   "list":[

   {"password":"1230","username":"coolcooldool"},

   {"password":"thisis2","username":"okokok"}

   ],

   "array":[

   {"password":"1230","username":"coolcooldool"},

   {"password":"thisis2","username":"okokok"}

   ]

   };

var obj2 = eval(value2);

alert(obj2.list[0].password);

}