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)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

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

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

字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。字符串(string)与C或者Java的字符串非常相似。

对应的形式:

 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[]);
}
</script>

设计坞官网https://www.wode007.com/sites/73738.html

注意:"()"运算符

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[]);
}
</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格式化工具,效果如下:

代码分析:

 <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=,j=,k=,ii,ele;i<text_value.length;i++)
{//k:缩进,j:""个数
ele=text_value.charAt(i);
if(j%==&&ele=="}")
{
k--;
for(ii=;ii<k;ii++) ele=" "+ele;
ele="\n"+ele;
}
else if(j%==&&ele=="{")
{
ele+="\n";
k++;
debugger;
for(ii=;ii<k;ii++) ele+=" ";
}
else if(j%==&&ele==",")
{
ele+="\n";
for(ii=;ii<k;ii++) ele+=" ";
}
else if(ele=="\"") j++;
res+=ele;
}
  document.getElementById('output_value').value = res;
  }
}
</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. JavaScript的for循环

    1.循环的目的 什么是循环?循环的目的是什么?循环能做什么? 举一个小例子:武汉疫情,学了JavaScript,必须拿JavaScript干点有意义的事情.我们想告诉武汉:“武汉加油,武汉挺住啊!”. ...

  2. Windows学习Nodejs、Npm和VUE

    前言 本文主要以开发的角度讲解Node.js,Npm和Vue. Node.js学习 什么是Node.js Node.js简单来说就是一个IISExpress,提供一个前端Html的独立运行环境. 安装 ...

  3. 给女朋友讲解什么是Git

    前言 在周六发现了Linus去Google演讲的一个视频,当时还发了一条朋友圈: 有兴趣的同学也可以去看看,一点儿也不无聊,在线看Linus大佬怼人 https://www.bilibili.com/ ...

  4. 需要加token验证的接口返回文件流下载

    没有加token之前,下载文件用的是a标签,直接下载. 现在要求是需要在header中加入token. getDownload(urls, fileName) { var url = urls; va ...

  5. 7. redux

    1.所有的状态统一放在state中,由store来管理state 2.用户触发一个action行为,由dispatch分发action行为 3.通过store把原有的state的状态值和dispatc ...

  6. jQuery实现打飞机游戏

    玩法介绍:不同样式的飞机出来其它飞机会暂停飞行且处于无敌状态,子弹对它无效,你操纵的飞机不能碰到任何飞机,发出的子弹可以攻击正在飞行的飞机,每击落一架飞机会记录分数,你操纵的飞机碰到其它飞机即为游戏结 ...

  7. rsyslog日志收集器

    rsyslog详解(思维导图) 1. 日志收集概述 1.1 日志记录 时间 事件 1.2 日志收集器 syslog rsyslog elk stack 1.3 日志文件 文件记录的日志格式 其他日志文 ...

  8. 单页面应用下刷新当前iframe

    $('button.layui-btn-elastic-2').click(function(){ var srcIframe=$(".layui-side ul li dd"). ...

  9. Stylus 之 网教通直播间整修

    暗色模式 效果 Mozilla 格式源代码 @-moz-document domain("fj.101.com") { * { transition: all .3s; } #wj ...

  10. os模块查看系统数据

    >>> import os >>> os.name # 操作系统类型 'posix' 如果是posix,说明系统是Linux.Unix或Mac OS X,如果是nt ...