HTML5学堂-码匠 HTML5学堂

您当前位于:AJAX数据交互 ——> JSON书写规范,JSON对象与JSON数组

JSON书写规范,JSON对象与JSON数组

2015/12/22 12:15:16 | 作者:HTML5学堂(码匠) | 分类:AJAX数据交互 | 关键词:JSON,AJAX,JSON对象类型,书写规范

JSON代码书写规范

HTML5学堂:在AJAX实现前后台数据交互的时候,通常使用JSON的数据格式,对于JSON来说,有严格的代码规范,一旦格式出问题,就无法显示出相应效果,同时还不在控制台报错。今天我们一起总结一下,JSON的书写有哪些规范。

JSON是什么?

在前后台的交互中,通常要互相传递消息,那就需要一种两方面都能“听懂的语言”,数据格式这里就代表语言。JSON就是前后台中都能理解的一种“语言”。

JSON的类型

JSON也有不同的组织形式,一种是JSON对象,一种为JSON数组。因此,在书写的代码当中,需要遵循基本的对象、数组的书写方式。

数组方式

  1.     [{
  2.         "city" : "BeiJing",
  3.         "num" : 5
  4.     }, {
  5.         "city" : "ShenZhen",
  6.         "num" : 5
  7.     }, {
  8.         "city" : "XiaMen",
  9.         "num" : 5
  10.     }]

对象方式

  1.     {
  2.         "user" : "H5course",
  3.         "type" : "studyNetwork",
  4.         "team" : [{
  5.             "city" : "BeiJing",
  6.             "num" : 5
  7.         }, {
  8.             "city" : "ShenZhen",
  9.             "num" : 5
  10.         }, {
  11.             "city" : "XiaMen",
  12.             "num" : 5
  13.         }]
  14.     }

书写JSON的注意事项

1 数组或对象之中的字符串必须使用双引号,不能使用单引号

2 对象的成员名称必须使用双引号

3 数组或对象最后一个成员的后面,不能加逗号

4 数组或对象的每个成员的值,可以是简单值,也可以是复合值。简单值分为四种:字符串、数值(必须以十进制表示)、布尔值和null(NaN, Infinity, -Infinity和undefined都会被转为null)。复合值分为两种:符合JSON格式的对象和符合JSON格式的数组。

不合法JSON的举例

案例1:使用单引号,不合法

  1.     {'user' : 'HTML5学堂'}

案例2:属性名没有使用双引号,不合法

  1.     {user : "HTML5学堂"}

案例3:使用16进制数字,不合法

  1.     {"age" : 0x12}

案例4:使用undefined,不合法

  1.     {"age" : undefined}

案例5:逗号使用错误,不合法

  1.     [{
  2.         "city" : "BeiJing",
  3.         "num" : 5,
  4.     }, {
  5.         "city" : "ShenZhen",
  6.         "num" : 5,
  7.     }]

案例6:使用自定义函数或内置函数(如Date),不合法

  1.     {
  2.         "user" : "HTML5学堂",
  3.         "ftn" : function(){
  4.             console.log('不能这么用啊');
  5.         }
  6.     }

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端