首页 计算机学科 web 前后端交互

# 初始 JSON

# JSON 是什么

Ajax 发送和接收数据的一种格式

JSON 全称是 JavaScript Object Notation

# 为什么需要 JSON

JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换。

# JSON 的 3 中形式

# 简单值形式

JSON 的简单值形式就对应着 JS 中的基础数据类型

数字，字符串，布尔值，null

"username"

注意事项：

  1. JSON 中没有 undefined 值
  2. JSON 中的字符串必须使用双引号
  3. JSON 中是不能注释的

# 对象形式

JSON 的对象形式就对应着 JS 中的对象

{
   "name":"张三",
   "gender":"男",
   "age":18,
   "user":{
   	"name":"李四",
   	"gender":"女",
   	"age":"20"
	},
}

注意事项：

JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号。

JSON 中只要涉及到字符串，就必须使用双引号。

不支持 undefined

# 数组形式

JSON 的数组形式就对应着 JS 中的数组

[
   "张三",
   "李四",
   "刘桑"
]
[
   {
      "name":"张三",
      "age":18
   },
   {
      "name":"李四",
      "age":20
   }
]

注意事项：

数组中的字符串必须使用双引号

JSON 中只要涉及到字符串，就必须使用双引号

不支持 undefined

# JSON 的常用方法

# JSON.parse

JSON.parse 可以将 JSON 格式的字符串解析成 JS 中的对应值

一定要是合法的 JSON 字符串，否则会报错

console.log(JSON.parse(xhr.responseText))

# JSON.stringify

JSON.stringify 可以将 JS 的基本数据类型，对象或者数组转换成 JSON

xhr.send(JSON.stringify(
   {
      name:"zhangsn",
      age:"18",
      hobby:["zuqi","bingbqiu"],
      userTo:{
         family:"sl",
         mother:"lidama"
      }
   }
))

# 使用 JSON.parse 和 JSON.stringify 封装 localStorage

import {set,get} from './js/storage.js'
set('username','dkx')
set('age',18)
set('zs',{
   name:"张三",
   age:18
})
console.log(get('username'))
console.log(get('age'))
console.log(get('zs'))

image-20230530164849606

image-20230530164902425

import {set,get,remove,clear} from './js/storage.js'
set('username','dkx')
set('age',18)
set('zs',{
   name:"张三",
   age:18
})
remove('username')
console.log(get('username'))
console.log(get('age'))
console.log(get('zs'))

image-20230530165013596

image-20230530165025302

import {set,get,remove,clear} from './js/storage.js'
set('username','dkx')
set('age',18)
set('zs',{
   name:"张三",
   age:18
})
remove('username')
clear()
console.log(get('username'))
console.log(get('age'))
console.log(get('zs'))

image-20230530165051597

image-20230530165100768