JavascriptJSON

2022-10-27 14:49:23 浏览数 (1)

什么是JSON?

JSONJavaScript Object Notation的缩写,它是一种基于文本的轻量级数据交换格式。它是一门独立的语言。

PHPJSP、.NET等等编程语言都支持JSON。

JSON 使用 JavaScript 语法。但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON的两种结构

对象结构

JSON对象保存在大括号中。可以存在多个关键字/值对。

其中关键字是字符串,而值可以是字符串、数值、true、false、null、对象或数组。

实例:

代码语言:javascript复制
{
    "firstname": "John",
    "secondname": "Doe",
    "age": 20,
}

数组结构

JSON数组保存在中括号中。

实例:

数组

代码语言:javascript复制
[
    "John", 
    "Marry",
    "Mark"
]

对象中的数组

代码语言:javascript复制
{
    "school": "1st school",
    "teachers":[
    	{"name": "Nick", "age": 30},
    	{"name": "Marry", "age": 35}
	]
}

JavaScript中使用JSON

因为JSON使用JavaScript语法,所以浏览器能直接处理JavaScript中的JSON。

访问、修改和删除

打开浏览器控制台,通过 JavaScript,创建一个对象数组,并像这样进行赋值:

代码语言:javascript复制
var teachers = [{"name": "Nick", "age": 30}, {"name": "Marry", "age": 35}]

访问

使用teachers[0]可以访问对象数组第一个对象。

可以使用teachers[0].name访问JavaScript对象数组的值。

除此之外使用teachers[0]["name"]也可以访问JavaScript对象数组的值。

修改

修改对象数组中的值。

删除

使用delete teachers[0]可以删除对象数组第一个值。

delete teachers[0].name或者delete teachers[0]["name"]都可以删除该对象的name属性。

如下图所示:

遍历对象

遍历对象的属性

使用for-in来遍历对象中的属性。

代码语言:javascript复制
var teachers = {"name": "Nick", "age": 30};

for (x in teachers) {
     console.log(x);
}

在控制台输出如下:

遍历属性的值

for-in循环对象的属性时,使用中括号来访问属性的值。

代码语言:javascript复制
var teachers = {"name": "Nick", "age": 30};

for (x in teachers) {
     console.log(teachers[x]);
}

在控制台输出如下:

遍历数组

使用for-in遍历数组。

代码语言:javascript复制
var myschool = {
    "school": "1st school",
    "teachers":[
    	{"name": "Nick", "age": 30},
    	{"name": "Marry", "age": 35}
	]
};

for (x in myschool.teachers){
     console.log(myschool.teachers[x].name);
}

在控制台输出如下:

JSON字符串与JS对象的转换

parse()

parse()将JSON字符串转换为JavaScript对象。

语法

代码语言:javascript复制
var obj = JSON.parse(str[, reviver]);
  • str为必须,一个有效的JSON字符串。
  • reviver 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

我们从服务端获取了如下数据:

代码语言:javascript复制
{"name": "Marry", "nation":"USA", "age": 30}

利用JSON.parse()处理以上数据:

代码语言:javascript复制
var per = JSON.parse('{"name": "Marry", "nation":"USA", "age": 30}');

解析完成后就可以使用从该JSON字符串转化的JavaScript对象了。

从服务端接收JSON

使用AJAX从服务端请求JSON数据并解析为JavaScript对象。

利用XMLHttpRequest()函数创造一个新的请求对象。

代码语言:javascript复制
var request = new XMLHttpRequest(); 

readystate改变时就会触发onreadystatechange事件。(详见AJAX – onreadystatechange 事件)

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

代码语言:javascript复制
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        console.log(Obj.name);
    }
}

最后发送request请求。

代码语言:javascript复制
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        console.log(Obj.name);
    }
}

request.open("GET", url);
request.send();

实例

新建一个mytest文件夹。

创建一个json格式的文件,将下面数据写入,并放入mytest文件夹下的JSON目录下。

代码语言:javascript复制
{
  "school": "1st school",
  "stunum": 30000,
  "teachers": [
    {
      "name": "Nick",
      "age": 30
    },
    {
      "name": "Marry",
      "age": 35
    }
  ]
}

mytest目录下创建一个html文件。

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>从服务端接收JSON数据</h1>
<p id="demo"></p>

<script>

var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = Obj.school;
    }
}

request.open("GET", "/JSON/jsontest.json", true);
request.send();

</script>

<p>查看<a href="/JSON/jsontest.json" target="_blank">JSON</a>文件数据</p>

</body>
</html>

使用phpstudy,将mytest文件夹放在其WWW目录下,打开网站。

stringify()

stringify()JavaScript对象转换为JSON字符串。

语法

代码语言:javascript复制
var obj = JSON.stringify(value[, replacer[, space]]);
  • value为必须,是需要转换的JavaScript对象或者数组。
  • replacer为可选,用于转换结果的函数或数组。
    1. 如果replacer为函数,则JSON.stringify将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员
    2. 如果replacer是一个数组,会遍历数组的值,以数组的值作为value的属性。如果value原本包含该属性,那么显示该属性,如果不包含则不显示。
  • space为可选,文本添加缩进、空格和换行符。

实例

代码语言:javascript复制
var obj = { name: "Marry", nation: "USA", age: 30};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

在控制台的结果如下图所示:

JSON工具

JSON在线解析工具

0 人点赞