javascript学习之json入门

JavaScript学习之JSON入门

什么是JSON?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集,易于人们阅读和编写。JSON以键值对的方式存储数据,类似与JavaScript中的对象。在前后端数据交互中,JSON被广泛使用。

JSON的基本语法

1. JSON对象

JSON对象是由花括号包含的一组键值对,键值对之间使用逗号分隔。

{
    "name": "Tom",
    "age": 18,
    "gender": "male"
}

2. JSON数组

JSON数组是由方括号包含的一组数据,数据之间使用逗号分隔。

["apple", "banana", "orange"]

3. JSON数据类型

在JSON中,可以使用的数据类型包括:字符串、数字、布尔、数组、对象和null。

{
    "name": "Tom",
    "age": 18,
    "gender": "male",
    "favItems": ["reading","coding"],
    "userInfo": {
        "address": "Beijing",
        "phone": 123456789
    },
    "isStudent": true,
    "desc": null
}

如何在JavaScript中使用JSON?

1. JSON.parse()

使用JSON.parse()方法将JSON字符串转换为JavaScript对象。

const jsonStr = '{"name":"Tom","age":18,"gender":"male"}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name);  // Tom
console.log(jsonObj.age);   // 18
console.log(jsonObj.gender); // male

2. JSON.stringify()

使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。

const jsonObj = {
    "name": "Tom",
    "age": 18,
    "gender": "male"
}
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);   // {"name":"Tom","age":18,"gender":"male"}

示例

示例一:解析包含JSON数组的数据

const jsonStr = '[{"name":"Tom","age":18},{"name":"Jerry","age":20}]';
const jsonObj = JSON.parse(jsonStr);
jsonObj.forEach(item => {
    console.log(item.name + " " + item.age);
})

示例二:使用axios发送POST请求,提交JSON数据

axios.post('/api/user/add', {
    "name": "Tom",
    "age": 18,
    "gender": "male"
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log(error);
})

以上就是本次“JavaScript学习之JSON入门”的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript学习之json入门 - Python技术站

(0)
上一篇 2023年5月30日
下一篇 2023年5月30日

相关文章

  • Js获取table当前tr行的值的代码

    以下是“Js获取table当前tr行的值的代码”的完整攻略: Js获取table当前tr行的值的代码 在JavaScript中,可以使用以下代码来获取table当前tr行的值: var table = document.getElementById("tableId"); var rows = table.getElementsByTag…

    html 2023年5月18日
    00
  • Android常见XML转义字符(总结)

    Android常见XML转义字符(总结) 在Android开发中,我们经常需要在XML文件中写入特殊字符以及一些转义字符。 下面是一些常见的XML转义字符以及它们的对应表示: 字符 转义表示 & & < < > > ” " ‘ ' 其中,&是XML文件中的特殊字符,所以需要使用相应的转义字符…

    html 2023年5月30日
    00
  • 怎么格式化html代码? Dreamweaver格式化html代码的技巧

    以下是“怎么格式化html代码? Dreamweaver格式化html代码的技巧”的完整攻略: 怎么格式化html代码? 格式化HTML代码是一种使HTML代码更易于阅读和理解的方法。如果需要格式化HTML代码,可以按照以下步骤进行: 打开HTML文件:在文本编辑器或HTML编辑器中打开需要格式化的HTML文件。 使用格式化工具:使用HTML编辑器或在线格式…

    html 2023年5月18日
    00
  • HTML基础之HTML内容细则

    HTML (Hyper Text Markup Language)是用于创建网页的标准标记语言。HTML文档由多个元素构成,这些元素可以使用标记来定义。在HTML中,元素通常有一个开始标记和一个结束标记,中间包含要在浏览器中显示的内容。 HTML元素的基本结构 HTML基础之HTML内容细则中,我们需要首先了解HTML元素的基本结构: <element…

    html 2023年5月30日
    00
  • asp.net(C#) Xml操作(增删改查)练习

    接下来我将为你提供一份ASP.NET(C#)XML操作的完整攻略,包括XML的增删改查。在本攻略中,我们将使用C#的常见类库和语法来实现XML数据的操作。 准备工作 在开始编写程序之前,我们需要确保已经安装好.NET开发环境。同时,需要在Visual Studio中新建一个ASP.NET项目,名为“XmlExercise”,并在项目中添加一个XML文件,文件…

    html 2023年5月30日
    00
  • java web过滤器处理乱码

    Java Web过滤器可以在用户请求进入Servlet之前拦截请求,并做一些对用户请求的处理。乱码问题是Java Web开发中经常会遇到的问题之一。本文将介绍Java Web过滤器如何处理乱码问题的完整攻略,包括过滤器的使用、过滤器的配置和两个示例说明。 过滤器的使用 使用过滤器的步骤如下: 创建一个类,实现javax.servlet.Filter接口。 在…

    html 2023年5月31日
    00
  • HTML5注册表单的自动聚焦与占位文本示例代码

    下面我会详细讲解“HTML5注册表单的自动聚焦与占位文本示例代码”完整攻略,步骤如下: 1. 设置自动聚焦 为了提高用户体验和简化用户操作,我们可以使用HTML5的autofocus属性来自动聚焦到某个表单元素上。只需要在表单元素上添加autofocus属性即可实现自动聚焦。 示例代码: <form> <label for="us…

    html 2023年5月30日
    00
  • win10部分文字乱码怎么解决?

    当在win10系统中遇到部分文字乱码时,我们可以采取以下的方法来解决: 1.更改系统编码格式 有时候,系统默认的编码格式可能不兼容某些软件或者网站导致出现了乱码。我们可以尝试修改编码格式来解决。 首先,我们可以在屏幕左下角的Win搜索栏中搜索“控制面板”,打开它。 在控制面板中,我们需要找到并点击“时钟和区域”选项。 下面依次点击“区域”、“更改系统区域设置…

    html 2023年5月31日
    00
合作推广
合作推广
分享本页
返回顶部