JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,采用完全獨立於語言的文本格式,但是也使用了類似於C語言家族的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 易於人閱讀和編寫,同時也易於機器解析和生成。 XML也是一種數據交換格式,為什么沒有選擇XML呢?因為XML雖然可以作為跨平台的數據交換格式,但是在JS中處理XML非常不方便,同時XML標記比數據多,增加了交換產生的流量,而JSON沒有附加的任何標記,在JS中可作為對象處理,所以我們更傾向於選擇JSON來交換數據。
一.json結構及形式
結構1:
“名稱/值”對的集合(A collection of name/value pairs)。不同的語言中,它被理解為對象(object),紀錄(record),結構(struct),字典(dictionary),哈希表(hash table),有鍵列表(keyed list),或者關聯數組 (associative array)。
對應的形式為:
對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”(左括號)開始,“}”(右括號)結束。每個“名稱”后跟一個“:”(冒號);“‘名稱/值’ 對”之間使用“,”(逗號)分隔。
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
結構2:
值的有序列表(An ordered list of values)。在大部分語言中,它被理解為數組(array)。
對應的形式為:
數組是值(value)的有序集合。一個數組以“[”(左中括號)開始,“]”(右中括號)結束。值之間使用“,”(逗號)分隔。
1 [ 2 { 3 key1:value1, 4 key2:value2 5 }, 6 { 7 key3:value3, 8 key4:value4 9 } 10 ]
二.json字符串轉化為json對象
字符串(string)是由雙引號包圍的任意數量Unicode字符的集合,使用反斜線轉義。一個字符(character)即一個單獨的字符串(character string)。字符串(string)與C或者Java的字符串非常相似。
對應的形式:
1 var json_text = "{'book':{'name':'JAVA編程','author':['Liu','Xu']},'num':222}";
字符串json轉化json對象有三種方式:
1.通過eval( ) 方法將字符串直接轉化為JSON對象 並獲得元素的值。
<script type="text/javascript"> window.onload = function(){ var json_text = "{'book':{'name':'JAVA編程','author':['Liu','Xu']},'num':222}"; //使用eval()將字符串轉換為對象 var json_obj = eval("("+ json_text +")"); //訪問 book-name document.write(json_obj.book.name); //訪問 book-author-Xu document.write(json_obj.book.author[1]); } </script>
設計塢官網https://www.wode007.com/sites/73738.html
注意:"()"運算符
2.new Function形式
1 <script type="text/javascript"> 2 window.onload = function(){ 3 var json_text = "{'book':{'name':'JAVA編程','author':['Liu','Xu']},'num':222}"; 4 //用new Function將字符串轉換為對象 5 var json_obj = (new Function("return" + json_text))(); 6 //訪問 book-name 7 document.write(json_obj.book.name); 8 //訪問 book-author-Xu 9 document.write(json_obj.book.author[1]); 10 } 11 </script>
3.使用全局的JSON對象
1 <script type="text/javascript"> 2 window.onload = function(){ 3 var json_text = '{"book":"js"}'; 4 //用全局JSON將字符串json轉換為json對象 5 var json_obj = JSON.parse(json_text); 6 //訪問 book-name 7 document.write(json_obj.book); 8 //訪問 book-author-Xu 9 //document.write(json_obj.book.author[1]); 10 } 11 </script>
目前IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已實現了該方法。注意:'{"book":"js"}'; 里面的屬性需要用雙引號引起來,才能解析,否則會失敗。
三.json校驗格式化工具簡單實現
做了一個比較簡單的json格式化工具,效果如下:
代碼分析:
1 <body> 2 <textarea id="content_value"> 3 </textarea> 4 <input type="button" value="格式化" onclick="check()"> 5 <textarea id="output_value"> 6 </textarea> 7 </body> 8 <script type="text/javascript"> 9 function check(){ 10 var text_value = document.getElementById('content_value').value; 11 if(text_value == ""){ 12 alert("不能為空"); 13 return false; 14 } else { 15 var res=""; 16 for(var i=0,j=0,k=0,ii,ele;i<text_value.length;i++) 17 {//k:縮進,j:""個數 18 ele=text_value.charAt(i); 19 if(j%2==0&&ele=="}") 20 { 21 k--; 22 for(ii=0;ii<k;ii++) ele=" "+ele; 23 ele="\n"+ele; 24 } 25 else if(j%2==0&&ele=="{") 26 { 27 ele+="\n"; 28 k++; 29 debugger; 30 for(ii=0;ii<k;ii++) ele+=" "; 31 } 32 else if(j%2==0&&ele==",") 33 { 34 ele+="\n"; 35 for(ii=0;ii<k;ii++) ele+=" "; 36 } 37 else if(ele=="\"") j++; 38 res+=ele; 39 } 40 document.getElementById('output_value').value = res; 41 } 42 } 43 </script>