json的基本用法

JKjiang 2020-06-25

一、技术概括

JSON(JavaScript Object Notation) 是存储和交换文本信息的语法。

  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
  • JSON 具有自我描述性,更易理解

二、JSON的几个基本用法

1.用JSON存数据,并且显示出来

<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>JSON存数据,并且显示出来</title>
  <p id="p"></p><br /> 
  <script>
  var JSONObject = {
  "name":"福大" 
  };
  document.getElementById("p").innerHTML=JSONObject.name 
  </script>
  </head>
  <body>
  </body>
  </html>

注意点

  • 放在中,页面还没有完全加载,document就去取元素了,这时候就会报错了
  • 放在中:放在head中的JS代码会在页面加载完成之前就读取,可以确保在需要使用脚本之前,它已经被载入了.
  • 放在body中:JavaScripts会在页面加载的时候被执行。

2.JSON数组

数组可包含多个对象

{
"sites":[
{"name":"福大","age":18},
{"name":"命大","age":19},
{"name":"造化大","age":20}
]
}

上面的"sites"是包含三个对象的数组.每个对象代表一条个人信息(名字,年龄)

数组作为JSON对象

  • JSON数组在中括号中写

  • JSON中数组值必须是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或null)

  • JavaScript中,数组可以是以上JSON数据类型,也可以是JAvascript的表达式,包括函数,日期,及underfined

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    <p id="p"></p>
    <script>
    var city ={
    
    "FZSH":“福建省会",
    "fz":["闽侯县","鼓楼区","仓山区"]
    }
    document.getElementById("p").innerHTML = city.fz[0];
    </script>
    </body>
    </html>

修改数组值

例如,把上面的闽侯县改成马尾区

city .fz[0]="马尾区"

删除数组值

例如删除闽侯县

delete city .fz[0]

3.解析函数

正常情况下键值对如:"name":"张三",但是现在传入的键值对变成:"name":"function(){ return "张三"}",那么能够解析地出来吗,JSON是不允许包含函数的,但是可以把函数包装称字符串的形式,进行传值。
例如

{ "name":"张三", "age":function () { return 100;}}(这种写法是不合法的)
  { "name":"张三", "age":"function () { return 100;}"}(这种写法是合法的)

只是我们想得到"张飞"这个名字,还需要对obj进行处理

注意

  • 当我们进行访问JSON对象中的属性时,可以以: 对象名.属性名 的形式进行访问,但是键值中包含函数后访问不同,前者并不生效,需要改为 对象名.属性名 () 才能访问.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <p id="p"></p>
    <script>
    var text = ‘{ "name":"张三", "age":"function () { return 100;}"}‘;
    var obj = JSON.parse(text);
    obj.age = eval("(" + obj.age+ ")");
    document.getElementById("p").innerHTML = obj.age(); 
    </script>
    </body>
    </html>

JavaScript函数eval()可以用于将JSON文本转换为JavaScript对象,eval()函数使用的是JavaScript编辑器,可以解析JSON,然后生成JavaScript对象,必需把文本包括在括号中,这样才能避免错误. eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本

三、总结

与XML不同之处

  • 1.没有结束标签
  • 2.更短
  • 3.能够适用内建的JavaScript eval()方法进行解析
  • 4.适用数组

使用JSON的步骤

  • 1.读取JSON字符串
  • 2.用eval()处理JSON字符串

JSON语法规则

  • 1.数据在名称/值对中
  • 2.数据用逗号分隔
  • 3.大括号保存对象
  • 4.中括号保存数组
  • JSON名称/值对
  • JSON数据的书写格式:名称/值对
  • 名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
    "name":"张三"等价于JavaScript中name="张三"

四、

参考:

json教程

相关推荐