js實現json格式化,以及json校驗工具的簡單實現


 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>

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM