JS操作JSON要领详细总结

JS操作JSON要领详细总结

什么是JSON

JSON是一种轻量级的数据交换格式,是JavaScript的一种子集。JSON格式具有很好的兼容性和可读性,广泛应用于前端与后端之间的数据传递及存储。

JSON语法规则

JSON数据由键值对组成,键和值使用冒号分隔,每个键值对之间使用逗号分隔,最外层需用花括号{}包裹。

{
  "name": "张三",
  "age": 18,
  "gender": "male"
}

如何在JS中操作JSON

JSON.parse()

JSON.parse()方法用于将JSON字符串转为JS对象。

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

JSON.stringify()

JSON.stringify()方法用于将JS对象转为JSON字符串。

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

访问JSON数据

访问JSON数据的方式与访问JS对象的方式相同,可以使用点操作符或方括号操作符。

const jsonObj = {"name": "张三", "age": 18, "gender": "male"};
console.log(jsonObj.name); // 输出:张三
console.log(jsonObj["age"]); // 输出:18

示例说明

示例1:将表单数据转化为JSON字符串

使用FormData对象获取表单数据,并使用JSON.stringify()方法将其转化为JSON字符串。

const form = document.querySelector('#my-form');
const formData = new FormData(form);
const jsonObj = {};

for (const [key, value] of formData.entries()) {
  jsonObj[key] = value;
}

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

示例2:从服务器端获取JSON数据

使用XMLHttpRequest对象发起HTTP请求,并通过JSON.parse()方法将服务器返回的JSON字符串转为JS对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data.json');

xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS操作JSON要领详细总结 - Python技术站

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

相关文章

  • Javascript Array splice 方法

    以下是关于JavaScript Array splice方法的完整攻略。 JavaScript Array splice方法 JavaScript Array splice方法用于向数组中添加或删除元素。该方法会改变原始数组,并返回被删除元素。 下面是一个使用splice方法的示例: var arr = [1, 2, 3, 4, 5]; arr.splice…

    JavaScript 2023年5月11日
    00
  • Angular.js中window.onload(),$(document).ready()的写法浅析

    Angular.js在页面加载和渲染完成后,可以使用一些方法来操作DOM元素,例如window.onload()和$(document).ready()。但是在Angular.js中,推荐使用指令来操作DOM元素。本文将分别对window.onload()和$(document).ready()以及指令的使用进行讲解。 window.onload()的用法 …

    JavaScript 2023年6月10日
    00
  • 获取dom元素那些讨厌的位置封装代码

    获取DOM元素位置是Web开发中比较常见的操作,但是由于不同浏览器之间存在差异,所以封装获取DOM元素位置代码时需要注意一些细节。在以下步骤中,我们将展示如何获取DOM元素的位置并将其封装到一个函数中。 1. 获取元素位置 文档坐标(client coordinate):指相对于左上角(0, 0)位置的像素坐标,通过DOM节点的clientX和clientY…

    JavaScript 2023年6月10日
    00
  • 详解原生JS动态添加和删除类

    下面就详细讲解一下“详解原生JS动态添加和删除类”的完整攻略。 概述 在前端开发中,动态改变元素的样式是十分常见的需求,其中动态添加类名和动态删除类名就是两种常见的实现方式。通过动态改变元素的类名,可以轻松实现样式的交互效果和动画效果。 动态添加类名 方法一:使用Element.classList方法 Element.classList是DOM API提供的…

    JavaScript 2023年6月10日
    00
  • Window.Open打开窗体和if嵌套代码

    下面我就来详细讲解一下“Window.Open打开窗体和if嵌套代码”的完整攻略。 Window.Open打开窗体 Window.Open 是一种在浏览器中打开新窗口的方法。它有几个参数可以设置:新窗口的 URL 地址、窗口大小和位置、是否允许调整窗口大小、是否允许工具栏和状态栏等。 下面是一个示例,展示如何通过 Window.Open 打开一个新窗口: &…

    JavaScript 2023年6月11日
    00
  • javaScript中push函数用法实例分析

    JavaScript中的push函数用于在数组末尾添加一个或多个元素,并返回新数组的长度。在本篇攻略中,我们将分析push函数的用法和几个示例来更好地理解其用法。 1. push函数基本用法 push函数是JavaScript中数组对象的一种方法,语法格式如下: arr.push(element1[, …[, elementN]]) 其中arr是要进行添…

    JavaScript 2023年5月27日
    00
  • JS实现数组去重及数组内对象去重功能示例

    JS实现数组去重及数组内对象去重功能示例攻略 在JavaScript中,我们经常会用到数组。但是,数组中如果有重复的元素会影响我们的数据操作,因此我们需要进行数组去重操作。在这篇攻略中,我将向您展示如何使用JavaScript实现数组去重及数组内对象去重功能,希望能帮助您更好地理解和应用JS。 数组去重 方法一:使用Set 使用Set可以很方便地去除数组中的…

    JavaScript 2023年5月27日
    00
  • javascript表单控件实例讲解

    JavaScript表单控件实例讲解 JavaScript是一种脚本语言,经常用于网页中对用户输入信息的校验和处理。表单是用户和服务器之间交换数据的最主要方式之一,JavaScript正是被广泛用于表单交互的。 表单控件分类 表单控件通常分为以下几类: 文本类控件:包括文本框、密码框、文本域等; 选择类控件:包括单选框、复选框、下拉框等; 文件上传类控件:用…

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