JavaScript 如何读取和处理 JSON 数据(附数据库交互指南)
在现代 Web 开发中,JSON(JavaScript Object Notation)已成为数据交换的事实标准,它轻量、易于人阅读和编写,也易于机器解析和生成,对于 JavaScript 如何读取 JSON 数据是一项核心技能,本文将探讨 JavaScript 读取 JSON 数据的多种方式,并重点讲解如何从数据库中获取 JSON 格式的数据。
第一部分:JavaScript 读取 JSON 的核心方法
JavaScript 提供了原生且非常简单的方法来处理 JSON,主要依赖于两个全局对象:JSON.parse() 和 JSON.stringify()。
JSON.parse():将 JSON 字符串转换为 JavaScript 对象
当你从服务器接收到数据,或者从一个文本文件中读取数据时,这些数据通常是以字符串的形式存在的,你需要使用 JSON.parse() 将这个字符串转换成一个 JavaScript 对象或数组,之后才能在代码中方便地访问其属性。
语法:
JSON.parse(text[, reviver])
text: 必需,一个有效的 JSON 格式的字符串。reviver: 可选,一个转换结果的函数,用于在返回之前对对象进行转换。
示例: 假设你有一个 JSON 字符串,表示一个用户信息。
// 这是一个 JSON 格式的字符串
const jsonString = '{"name":"张三","age":30,"isStudent":false,"courses":["数学","物理"]}';
// 使用 JSON.parse() 将其转换为 JavaScript 对象
const userObject = JSON.parse(jsonString);
// 现在你可以像操作普通 JS 对象一样访问数据
console.log(userObject.name); // 输出: 张三
console.log(userObject.age); // 输出: 30
console.log(userObject.courses[0]); // 输出: 数学
console.log(userObject.isStudent); // 输出: false
错误处理:
如果传入的 JSON.parse() 的不是一个有效的 JSON 字符串,它会抛出 SyntaxError,在实际应用中,使用 try...catch 是一个好习惯。
const invalidJsonString = "{name: '李四', age: 25}"; // 无效,属性名必须用双引号
try {
const obj = JSON.parse(invalidJsonString);
console.log(obj);
} catch (error) {
console.error("解析 JSON 失败:", error.message);
// 输出: 解析 JSON 失败: Unexpected token n in JSON at position 1
}
JSON.stringify():将 JavaScript 对象转换为 JSON 字符串
这个过程是 JSON.parse() 的逆操作,当你需要将一个 JavaScript 对象发送到服务器或保存到本地存储时,你需要先将其序列化为 JSON 字符串。
语法:
JSON.stringify(value[, replacer[, space]])
value: 必需,要转换的 JavaScript 对象或数组。replacer: 可选,用于控制如何转换结果的函数或数组。space: 可选,用于美化输出(缩进)的空格数。
示例:
const myObject = {
id: 101,
product: "笔记本电脑",
price: 5999,
inStock: true
};
// 将 JS 对象转换为 JSON 字符串
const jsonString = JSON.stringify(myObject);
console.log(jsonString);
// 输出: {"id":101,"product":"笔记本电脑","price":5999,"inStock":true}
// 使用 space 参数美化输出,方便调试
const prettyJsonString = JSON.stringify(myObject, null, 2);
console.log(prettyJsonString);
/*
输出:
{
"id": 101,
"product": "笔记本电脑",
"price": 5999,
"inStock": true
}
*/
第二部分:从数据库中读取 JSON 数据
现在我们来回答核心问题:“js怎么读取json中的数据库中”,这个问题的核心在于,JavaScript 本身不能直接连接和查询数据库,数据库通常运行在服务器上,而 JavaScript 运行在浏览器(前端)或 Node.js 环境(后端)。
前端 JavaScript 读取数据库数据的流程是:前端请求 -> 后端处理 -> 数据库查询 -> 后端返回 JSON -> 前端接收并解析。
下面我们分两种主要场景来讲解。
前端浏览器中的 JavaScript
在这种模式下,前端通过 API(应用程序编程接口)向服务器请求数据,服务器负责从数据库中查询数据,然后将其格式化为 JSON 字符串作为 HTTP 响应返回给前端。
步骤 1:后端设置 API 接口
后端开发者(使用 Node.js, Python, Java, PHP 等)会创建一个 API 端点(/api/users),当这个端点被请求时,它会执行以下操作:
- 连接到数据库。
- 执行 SQL 查询(
SELECT * FROM users)。 - 将查询结果(通常是数据库行)转换成 JSON 格式。
- 将 JSON 数据作为 HTTP 响应发送回前端。
步骤 2:前端使用 fetch API 请求数据
现代浏览器提供了 fetch API,它是进行网络请求的标准方式。
示例代码:
假设我们有一个后端 API https://api.example.com/products,它返回一个产品列表的 JSON。
// 使用 fetch API 发送 GET 请求
fetch('https://api.example.com/products')
.then(response => {
// 检查请求是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// response.json() 会将响应体(Response Stream)解析为 JSON 格式
// 这个返回的 Promise 会解析成 JSON 对象
return response.json();
})
.then(data => {
// 'data' 就是一个已经被解析好的 JavaScript 对象或数组
console.log('成功获取数据:', data);
// 现在你可以操作这些数据了,比如渲染到页面上
const productContainer = document.getElementById('product-list');
data.forEach(product => {
const productElement = document.createElement('div');
productElement.innerHTML = `
<h3>${product.name}</h3>
<p>价格: ¥${product.price}</p>
`;
productContainer.appendChild(productElement);
});
})
.catch(error => {
// 捕获网络错误或 JSON 解析错误
console.error('获取数据时出错:', error);
});
代码解析:
fetch()发起请求,返回一个 Promise。- 第一个
.then()接收response对象。response.ok检查状态码是否在 200-299 范围内。 response.json()是关键一步,它读取响应流并将其完整地解析为 JSON,它本身也返回一个 Promise。- 第二个
.then()接收的就是解析后的 JavaScript 对象data,此时你就可以自由使用它了。 .catch()用于捕获任何在请求或解析过程中发生的错误。
Node.js 环境中的 JavaScript
如果你使用 Node.js 作为后端,JavaScript 代码可以直接连接数据库并查询数据。
步骤 1:安装数据库驱动 你需要为你的数据库安装相应的 Node.js 驱动或客户端库。
- MySQL:
npm install mysql2 - PostgreSQL:
npm install pg - MongoDB:
npm install mongodb(MongoDB 原生就使用 BSON,一种类 JSON 格式)
步骤 2:编写代码连接数据库并查询
示例代码(使用 mysql2 驱动连接 MySQL):
// 1. 导入数据库驱动
const mysql = require('mysql2/promise');
// 2. 创建数据库连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'my_test_db',
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
// 3. 定义一个异步函数来查询数据
async function getProductsFromDB() {
try {
// 从连接池中获取一个连接
const connection = await pool.getConnection();
console.log('成功连接到数据库!');
// 执行 SQL 查询
const [rows, fields] = await connection.query('SELECT * FROM products');
// 'rows' 就是一个包含所有查询结果的 JavaScript 对象数组
// 它已经是 JSON 兼容的格式了
console.log('从数据库获取的产品数据:', rows);
// 在这里你可以处理这些数据,或者将其作为 API 响应返回
return rows;
} catch (error) {
console.error('查询数据库时出错:', error);
} finally {
// 确保连接被释放回连接池
// pool.releaseConnection(connection); // 注意:如果使用 getConnection


还没有评论,来说两句吧...