AJAX and JSON Example

创作时间:

作者:

@小白创作中心

AJAX and JSON Example

引用

CSDN

https://m.blog.csdn.net/jimn2000/article/details/144093230

在前后端的数据交换中，AJAX（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）是非常常见的技术。AJAX允许网页与服务器进行异步数据交换，而JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。下面我将提供一个前后端使用AJAX和JSON进行数据交换的详细例子。

后端（以Node.js为例）

首先，我们需要一个后端服务来处理AJAX请求并返回JSON数据。这里我们使用Node.js和Express框架来创建一个简单的API。

安装Node.js和Express

如果你还没有安装Node.js，可以从Node.js官网下载并安装。安装完成后，使用npm（Node.js的包管理器）安装Express：

npm init -y
npm install express --save

创建服务器

创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const app = express();
app.use(express.json()); // 用于解析JSON格式的请求体

// 定义一个GET路由，返回JSON数据
app.get('/api/data', (req, res) => {
  const data = {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com'
  };
  res.json(data); // 以JSON格式响应
});

// 定义一个POST路由，接收JSON数据
app.post('/api/data', (req, res) => {
  const receivedData = req.body;
  console.log('Received data:', receivedData);
  res.json({ message: 'Data received', receivedData });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

运行服务器

在命令行中运行以下命令启动服务器：

node server.js

前端（HTML + JavaScript）

接下来，我们将创建一个简单的HTML页面，使用AJAX请求从后端获取数据，并发送数据到后端。

创建HTML页面

创建一个名为index.html的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX and JSON Example</title>
</head>
<body>
  <h1>AJAX and JSON Example</h1>
  <button id="fetchData">Fetch Data</button>
  <div id="data"></div>
  <script src="script.js"></script>
</body>
</html>

创建JavaScript文件

创建一个名为script.js的文件，并添加以下代码：

document.getElementById('fetchData').addEventListener('click', function() {
  fetch('http://localhost:3000/api/data')
    .then(response => response.json())
    .then(data => {
      document.getElementById('data').textContent = 'Name: ' + data.name + ', Email: ' + data.email;
    })
    .catch(error => console.error('Error:', error));
});

// 发送数据到后端
function sendData() {
  const data = {
    id: 2,
    name: 'Jane Doe',
    email: 'jane@example.com'
  };
  fetch('http://localhost:3000/api/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));
}