怎么把前端数据封装成json传到python后端

原创

mob64ca12f6aae1 2024-10-21 05:40:32 ©著作权

文章标签 JSON json Python 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f6aae1的原创作品，请联系作者获取转载授权，否则将追究法律责任

将前端数据封装成 JSON 传递至 Python 后端

在现代 Web 开发中，前后端分离已经成为一种主流的开发模式。前端负责用户交互与信息展示，而后端则负责数据处理与存储。本文将介绍如何将前端数据封装成 JSON 格式，并传递至 Python 后端，从而解决一个实际问题。

实际问题

假设我们正在开发一款简单的在线图书管理系统。用户可以通过前端表单提交图书的信息，包括书名、作者、ISBN 号和价格。我们需要将这些数据发送到后端进行存储和处理。

JSON 格式简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。它以键值对的形式存储数据，非常适合前后端之间的数据传输。

JSON 示例

假设我们要传输的数据如下：

书名：学习 Python
作者：小明
ISBN：978-3-16-148410-0
价格：79.00

我们可以将其表示为以下 JSON 格式：

{
  "title": "学习 Python",
  "author": "小明",
  "isbn": "978-3-16-148410-0",
  "price": 79.00
}

前端代码

我们将使用 HTML 和 JavaScript 创建一个简单的表单，让用户输入图书信息。表单提交后，通过 AJAX 将数据发送到后端。以下是前端代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
</head>
<body>
    添加图书
    <form id="bookForm">
        <label for="title">书名:</label>
        <input type="text" id="title" name="title" required>
        <br>
        <label for="author">作者:</label>
        <input type="text" id="author" name="author" required>
        <br>
        <label for="isbn">ISBN:</label>
        <input type="text" id="isbn" name="isbn" required>
        <br>
        <label for="price">价格:</label>
        <input type="number" id="price" name="price" required>
        <br>
        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('bookForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 防止默认表单提交
            const formData = {
                title: document.getElementById('title').value,
                author: document.getElementById('author').value,
                isbn: document.getElementById('isbn').value,
                price: parseFloat(document.getElementById('price').value)
            };
            const jsonData = JSON.stringify(formData);

            fetch('http://localhost:5000/add_book', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: jsonData
            })
            .then(response => response.json())
            .then(data => {
                alert('图书添加成功: ' + JSON.stringify(data));
            })
            .catch(error => {
                console.error('发生错误:', error);
            });
        });
    </script>
</body>
</html>

Python 后端代码

在后端，我们需要使用一个框架来处理 HTTP 请求。在这里，我们选择 Flask，它是一个轻量级的 Python Web 框架。下面是后端代码示例：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/add_book', methods=['POST'])
def add_book():
    book = request.get_json()  # 接收 JSON 数据
    # 在这里可以将数据存入数据库，或进行其他处理
    print("接收到的图书信息:", book)
    return jsonify({'message': '图书添加成功', 'book': book}), 201

if __name__ == '__main__':
    app.run(debug=True)

运行步骤

前端: 将 HTML 代码保存为 index.html，并在浏览器中打开。
后端: 将 Python 代码保存为 app.py，并确保已安装 Flask，使用命令 pip install Flask 进行安装。然后在终端中运行 python app.py 启动后端服务。
提交: 在浏览器中填写图书信息，点击“提交”按钮，即可将数据发送到后端。