html5把json传给flask|极客笔记

html5把json传给flask

在Web开发中，前端页面通常使用HTML5和JavaScript进行设计和交互，而后端服务器则使用框架如Flask进行数据处理和响应。在前后端之间进行数据交互时，通常会使用JSON格式来传输数据。本文将详细介绍如何在HTML5中使用JavaScript将JSON数据发送给Flask后端。

创建Flask后端

首先，我们需要创建一个简单的Flask应用作为后端来接收JSON数据。以下是一个简单的Flask应用示例：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/receive_json', methods=['POST'])
def receive_json():
    data = request.get_json()
    return jsonify({'received_data': data})

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

在上面的示例中，我们创建了一个Flask应用，并定义了一个路由 /receive_json 来接收POST请求发送的JSON数据。接收到数据后，会将其返回为JSON格式的响应。

编写HTML5页面

接下来，我们需要在HTML5页面中编写JavaScript代码来发送JSON数据到Flask后端。以下是一个简单的HTML页面示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send JSON to Flask</title>
</head>

<body>

    <h2>Send JSON Data to Flask</h2>

    <button onclick="sendData()">Send Data</button>

    <script>
        function sendData() {
            var data = {
                'name': 'Alice',
                'age': 30,
                'email': 'alice@example.com'
            };

            fetch('/receive_json', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>

</body>

</html>

在上面的HTML页面中，我们定义了一个按钮，当点击按钮时会触发 sendData() 函数。在该函数中，我们创建了一个JSON对象 data 并使用 fetch 方法将其发送到Flask后端的 /receive_json 路由。发送成功后将在控制台输出响应的JSON数据。

运行示例

运行Flask应用：

$ python app.py

在浏览器中打开HTML页面，点击 “Send Data” 按钮。
在Flask应用的控制台可以看到接收到的JSON数据：

{
    "received_data": {
        "name": "Alice",
        "age": 30,
        "email": "alice@example.com"
    }
}

通过上述步骤，我们成功地使用HTML5和JavaScript将JSON数据发送给Flask后端，并在后端接收并处理数据。这种前后端之间使用JSON进行数据交互的方式在现代Web开发中非常常见，能够方便高效地传输数据。

html5把json传给flask