json数据格式及json校验格式化工具简单实现

时间 2019-12-05

标签 json 数据格式校验格式化工具简单实现栏目 JavaScript 繁體版

原文原文链接

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用彻底独立于语言的文本格式，可是也使用了相似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。易于人阅读和编写，同时也易于机器解析和生成。 XML也是一种数据交换格式，为何没有选择XML呢？由于XML虽然能够做为跨平台的数据交换格式，可是在JS中处理XML很是不方便，同时XML标记比数据多，增长了交换产生的流量，而JSON没有附加的任何标记，在JS中可做为对象处理，因此咱们更倾向于选择JSON来交换数据。javascript

一.json结构及形式

结构1:html

　　“名称/值”对的集合（A collection of name/value pairs）。不一样的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。java

对应的形式为：编程

　　对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每一个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。json

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

结构2:数组

　　值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。工具

对应的形式为：spa

　　数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。debug

[
    {
        key1:value1,
        key2:value2 
    },
    {
         key3:value3,
         key4:value4   
    }
]

二.json字符串转化为json对象

字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。字符串（string）与C或者Java的字符串很是类似。code

对应的形式：

 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>

注意："()"运算符

2.new Function形式

<script type="text/javascript">
    window.onload = function(){
       var json_text = "{'book':{'name':'JAVA编程','author':['Liu','Xu']},'num':222}";
       //用new Function将字符串转换为对象
       var json_obj = (new Function("return" + json_text))();
       //访问 book-name
       document.write(json_obj.book.name);
       //访问 book-author-Xu
       document.write(json_obj.book.author[1]);
    } 
  </script>

3.使用全局的JSON对象

<script type="text/javascript">
    window.onload = function(){
       var json_text = '{"book":"js"}';
       //用全局JSON将字符串json转换为json对象
       var json_obj = JSON.parse(json_text);
       //访问 book-name
       document.write(json_obj.book);
       //访问 book-author-Xu
       //document.write(json_obj.book.author[1]);
    } 
  </script>

目前IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法。注意：'{"book":"js"}'; 里面的属性须要用双引号引发来，才能解析，不然会失败。

三.json校验格式化工具简单实现

作了一个比较简单的json格式化工具，效果以下：

初始数据：

json格式化后的数据：

代码分析：

<body> 
  <textarea id="content_value">
  </textarea>
  <input type="button" value="格式化" onclick="check()">
  <textarea id="output_value">
  </textarea>
</body> 
<script type="text/javascript">
function check(){
　　var text_value = document.getElementById('content_value').value;
　　if(text_value == ""){
   　　alert("不能为空");  
   　　return false;
　　} else {
        var res="";
        for(var i=0,j=0,k=0,ii,ele;i<text_value.length;i++)
        {//k:缩进，j:""个数
            ele=text_value.charAt(i);
            if(j%2==0&&ele=="}")
            {
                k--;                
                for(ii=0;ii<k;ii++) ele="    "+ele;
                ele="\n"+ele;
            }
            else if(j%2==0&&ele=="{")
            {
                ele+="\n";
                k++;     
                debugger;       
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(j%2==0&&ele==",")
            {
                ele+="\n";
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(ele=="\"") j++;
            res+=ele;        
        }
    　　document.getElementById('output_value').value = res;
　　}
}
</script>

参考资料：

http://www.json.org/json-zh.html

http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html

http://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html

http://www.cnblogs.com/xugang/archive/2010/09/10/1823422.html

http://www.cnblogs.com/snandy/archive/2011/03/13/1981611.html

http://www.cnblogs.com/know/archive/2011/03/13/1982839.html