浅谈JS中json数据的处理

下面是“浅谈JS中json数据的处理”的完整攻略：

一、什么是JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，以易于读写且易于机器解析的形式传输数据。JSON采用键值对的形式组织数据，并使用逗号分隔不同的键值对。

二、JSON数据的表示方式

在JavaScript中使用JSON表示数据时，可以使用字面量表示法和对象表示法。

1. 字面量表示法

字面量表示法即直接将JSON数据写在JavaScript代码中，可以使用花括号“{}”表示一个空的JSON对象，使用中括号“[]”表示一个空的JSON数组。例如：

let json = {
  "name": "张三",
  "age": 20,
  "hobbies": ["篮球", "足球"]
}

2. 对象表示法

对象表示法即使用JavaScript中的对象来表示JSON数据。可以使用parse()方法将JSON字符串转化为对象，使用stringify()方法将对象转化为JSON字符串。例如：

let jsonString = '{"name":"张三","age":20,"hobbies":["篮球","足球"]}';
let jsonObj = JSON.parse(jsonString);
console.log(jsonObj);

let jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);

三、JSON数据的处理

1. 访问JSON数据

可以通过点号“.”或方括号“[]”来访问JSON对象中的属性值，也可以通过方括号“[]”来访问JSON数组中的元素。例如：

let json = {
  "name": "张三",
  "age": 20,
  "hobbies": ["篮球", "足球"]
}

console.log(json.name);
console.log(json["age"]);
console.log(json.hobbies[0]);

2. 遍历JSON数据

可以使用for...in循环遍历JSON对象中的键值对，也可以使用for循环遍历JSON数组中的元素。例如：

let json = {
  "name": "张三",
  "age": 20,
  "hobbies": ["篮球", "足球"]
}

for(let key in json){
  console.log(key + ":" + json[key]);
}

for(let i=0; i<json.hobbies.length; i++){
  console.log(json.hobbies[i]);
}

四、示例说明

1. 从服务器获取JSON数据并处理

前端页面可以通过AJAX技术向后端服务器发送请求并获取JSON数据，然后通过JSON的访问和遍历方法处理数据。例如：

//前端页面发送AJAX请求获取JSON数据
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let jsonObj = JSON.parse(this.responseText);
    //处理JSON数据
    for(let i=0; i<jsonObj.length; i++){
      console.log(jsonObj[i].name);
    }
  }
};
xmlhttp.open("GET", "demo.json", true);
xmlhttp.send();

2. 创建JSON数据并发送到服务器

前端页面也可以通过构造JSON数据来发送到后端服务器，并处理服务器的响应结果。例如：

let json = {
  name: "张三",
  age: 20,
  hobbies: ["篮球", "足球"]
}

//将JSON数据转化为JSON字符串
let jsonString = JSON.stringify(json);
//前端页面发送AJAX请求将JSON字符串发送到服务器
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //处理服务器响应结果
    console.log(this.responseText);
  }
};
xmlhttp.open("POST", "demo.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("json=" + jsonString);

以上就是“浅谈JS中json数据的处理”的完整攻略和示例说明。