示例 JSON - JavaScript

JSON是现代Web开发中广泛使用的数据格式，也是JavaScript中的核心数据格式之一。在本文中，我们将介绍如何在JavaScript中使用JSON，并提供一些示例。

JSON是什么

JSON是JavaScript对象表示法（JavaScript Object Notation）的缩写。它是一种轻量级的数据交换格式，易于阅读和编写，也易于解析和生成。JSON实际上是一种文本格式，它由key-value键值对和{}和[]中括号组成，具体格式如下：

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

在JavaScript中使用JSON

在JavaScript中，我们可以使用JSON对象来解析和生成JSON数据。JSON对象具有两个核心方法：JSON.parse()和JSON.stringify()。

JSON.parse()

JSON.parse()方法将JSON字符串解析为JavaScript对象。例如，我们有一个JSON字符串：

'{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}'

我们可以使用JSON.parse()方法将其解析为JavaScript对象：

const jsonString = '{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}';

const jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name); // 输出 "John Doe"

JSON.stringify()

相反地，JSON.stringify()方法将JavaScript对象转换为JSON字符串。例如，我们有一个JavaScript对象：

const jsonObj = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

我们可以使用JSON.stringify()方法将其转换为JSON字符串：

const jsonString = JSON.stringify(jsonObj);

console.log(jsonString); // 输出 '{"name":"John Doe","age":30,"city":"New York"}'

示例

下面是一些使用JSON的JavaScript示例，包括读取JSON文件、使用API返回JSON数据和将表单数据转换为JSON。

读取JSON文件

fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data));

使用API返回JSON数据

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

将表单数据转换为JSON

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br><br>
  <label for="city">City:</label>
  <input type="text" id="city" name="city"><br><br>
  <input type="button" value="Submit" onclick="submitForm()">
</form>

function submitForm() {
  const formData = new FormData(document.getElementById("myForm"));
  const json = {};

  formData.forEach((value, key) => {
    json[key] = value;
  });

  const jsonString = JSON.stringify(json);

  console.log(jsonString);
}

以上为示例JSON - JavaScript的相关内容。在使用JSON时，请始终牢记对数据进行验证和转义以避免安全漏洞。