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)。

对应的形式为:

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

  1. { "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对象 并获得元素的值。

  1. <script type="text/javascript">
  2. window.onload = function(){
  3. var json_text = "{'book':{'name':'JAVA编程','author':['Liu','Xu']},'num':222}";
  4. //使用eval()将字符串转换为对象
  5. var json_obj = eval("("+ json_text +")");
  6. //访问 book-name
  7. document.write(json_obj.book.name);
  8. //访问 book-author-Xu
  9. document.write(json_obj.book.author[]);
  10. }
  11. </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[]);
  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=,j=,k=,ii,ele;i<text_value.length;i++)
  17. {//k:缩进,j:""个数
  18. ele=text_value.charAt(i);
  19. if(j%==&&ele=="}")
  20. {
  21. k--;
  22. for(ii=;ii<k;ii++) ele=" "+ele;
  23. ele="\n"+ele;
  24. }
  25. else if(j%==&&ele=="{")
  26. {
  27. ele+="\n";
  28. k++;
  29. debugger;
  30. for(ii=;ii<k;ii++) ele+=" ";
  31. }
  32. else if(j%==&&ele==",")
  33. {
  34. ele+="\n";
  35. for(ii=;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>

js实现json格式化,以及json校验工具的简单实现的更多相关文章

  1. 给json格式化的一个小工具

    var glob = require("glob") // options is optional var fs=require("fs") glob(&quo ...

  2. JSON格式化与serialize序列化

    一.JSON格式化 1. JSON是什么 JSON是一种数据的存储格式,用来沟通客户端Javascript和服务端PHP的交互.我们把用PHP生成JSON后的字符串传给前台Javascript,Jav ...

  3. ABP入门系列(8)——Json格式化

    ABP入门系列目录--学习Abp框架之实操演练 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json ...

  4. 【转】json格式化、高亮库jsonFormater

    http://leo108.com/pid-1996.asp JsonFormater 基于jQuery的json格式化.高亮库 核心代码参考天马行空工作室,本人只做了模块化和一些代码优化. demo ...

  5. JSON在线解析及格式化校验工具 jsonin.com

    JSON在线解析及格式化校验工具 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.它是基 ...

  6. 校验字符串是否是JSON格式,将不规则展示的json格式的字符串进行规则展示(json格式化)

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   var str = {"code": "","svcname" ...

  7. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

  8. json格式化和查看工具

    以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...

  9. json格式化显示样式js代码分享

    最近开发中需要在页面展示json.特整理了下代码,送给大家,希望能帮到有同样需求的朋友们. 代码: <html> <script src="http://cdn.bootc ...

随机推荐

  1. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  2. 诸葛亮vs司马懿,排序算法大战谁能笑到最后?

    阵前对峙 公元234年,蜀汉丞相诸葛孔明再次北伐. 一日,与司马仲达所率魏军两军相峙,二人阵前舌战. 司马曰:"诸葛村夫,吾与汝相斗数年,斗兵斗阵斗谋略,均已疲乏.今日,何不一改陈规,斗点新 ...

  3. 并发编程之sun.misc.Unsafe类

    1.Unsafe知识点整理 2.代码: package com.javabasic.unsafe; import java.lang.reflect.Field; import sun.misc.Un ...

  4. Flask简单http接口实现

    # flask demo from flask import Flask, request app = Flask(__name__) # http://127.0.0.1:8080 @app.rou ...

  5. 学习ASP.NET Core(10)-全局日志与xUnit系统测试

    上一篇我们介绍了数据塑形,HATEOAS和内容协商,并在制器方法中完成了对应功能的添加:本章我们将介绍日志和测试相关的概念,并添加对应的功能 一.全局日志 在第一章介绍项目结构时,有提到.NET Co ...

  6. 01.Markdown学习

    Markdown学习 一.标题 在想要设置为标题的文字前面加#来表示(#后面有空格) 一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 示例: # 这是一级标题 ## 这是二级标题 ### ...

  7. SpringBoot爬坑系列

    1.日志篇 现象 由于日志配置采用原来SpringMVC项目中的log4j.properties 文件,日志采用springboot自带的jar包会出现打印不出日志的情况. 解决 引入原日志包 < ...

  8. 2w字长文!手撸一套 Java 基础面试题

    Java 基础篇 Java 有哪些特点 并发性的: 你可以在其中执行许多语句,而不必一次执行它 面向对象的:基于类和面向对象的编程语言. 独立性的: 支持一次编写,到处运行的独立编程语言,即编译后的代 ...

  9. CISCN 2019-ikun

    0x01 进去网址,页面如下: 刚开始有个登陆和注册的按钮,上图是我已经注册后登陆成功后的页面,我们发现在图的左下角给了一个关键的提示,购买LV6,通过寻找我们发现页面数很多,大概500页,一个一个找 ...

  10. 2019-02-07 selenium...

    今天是超级郁闷的一天 看教程 下了mysql-----配置-----不会----查资料------2小时后 mongodb-----配置------不会------查资料------1小时后 然后是各 ...