如何用Python接收和处理来自JavaScript的数据

null
如何用Python接收和处理来自JavaScript的数据

11 回复

正在学 python，如果可以，请给我一个案例学习。


在Python后端接收和处理来自JavaScript的数据，主要涉及Web框架（如Flask、Django）和API设计。这里以最常用的Flask框架为例，展示一个完整的RESTful API端点，用于接收JSON数据。

核心步骤：

  1. 后端（Flask）：创建一个路由（如/api/data），使用request.get_json()来解析前端发送的JSON请求体。
  2. 前端（JavaScript）：使用fetch API或axios库，通过POST请求将JSON数据发送到上述端点。

完整代码示例：

首先，确保安装了Flask：

pip install flask

1. Python后端代码 (app.py)

from flask import Flask, request, jsonify

app = Flask(__name__)

# 定义一个POST接口来接收数据
@app.route('/api/receive', methods=['POST'])
def receive_data():
    try:
        # 1. 获取前端发送的JSON数据
        data = request.get_json()

        # 2. 简单的数据验证（示例）
        if not data or 'message' not in data:
            return jsonify({'error': 'Invalid data, "message" field is required.'}), 400

        # 3. 处理数据（这里只是打印和简单修改）
        received_message = data['message']
        print(f"Received from frontend: {received_message}")

        processed_message = f"Server processed: {received_message.upper()}"

        # 4. 返回响应给前端
        response = {
            'status': 'success',
            'original': received_message,
            'processed': processed_message
        }
        return jsonify(response), 200

    except Exception as e:
        # 捕获并处理异常
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)  # 启动开发服务器

2. JavaScript前端代码示例 (使用fetch API) 假设你的前端是一个简单的HTML页面，可以通过以下方式发送数据：

<!DOCTYPE html>
<html>
<body>
    <button onclick="sendData()">发送数据到Python后端</button>
    <div id="result"></div>

    <script>
        async function sendData() {
            // 要发送的数据
            const dataToSend = {
                message: "Hello from JavaScript!",
                timestamp: new Date().toISOString()
            };

            try {
                const response = await fetch('http://127.0.0.1:5000/api/receive', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(dataToSend)
                });

                const result = await response.json();
                document.getElementById('result').innerHTML = 
                    `<p>服务器响应: ${JSON.stringify(result)}</p>`;
                console.log('Server response:', result);

            } catch (error) {
                console.error('Error:', error);
                document.getElementById('result').innerHTML = 
                    `<p style="color:red;">请求失败: ${error.message}</p>`;
            }
        }
    </script>
</body>
</html>

关键点解释：

  • request.get_json()：这是Flask中解析JSON请求体的标准方法。它会自动将JSON字符串转换为Python字典（或列表）。
  • Content-Type: application/json：前端在发送请求时必须设置这个请求头，这样后端才知道如何正确解析数据。
  • 错误处理：后端代码包含基本的验证（检查必要字段）和异常捕获，返回适当的HTTP状态码（如400表示客户端错误，500表示服务器错误）。
  • 跨域问题 (CORS)：如果你的前端和后端不在同一个域名/端口下，浏览器会因同源策略阻止请求。在生产环境中，你需要使用Flask-CORS等扩展来处理。对于本地开发快速测试，可以在Flask中临时添加：
    from flask_cors import CORS
CORS(app)  # 允许所有跨域请求（仅用于开发！）

运行流程：

  1. 在终端运行 python app.py 启动Flask服务器（默认在 http://127.0.0.1:5000）。
  2. 用浏览器打开包含上述JavaScript代码的HTML文件。
  3. 点击按钮，前端会发送一个POST请求到 http://127.0.0.1:5000/api/receive。
  4. 后端接收、处理数据，并返回一个JSON响应。
  5. 前端在页面和控制台中显示响应结果。

总结：核心就是用Flask的request.get_json()接住前端发来的JSON包。

问题描述不详细，建议先学学提问的智慧，https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

python 写一个 rest 接口供 js 调用就好了

问题没有描述清楚，我重新描述一下。
我在 data.js 中定义了 var huilv = document.getElementById(“huilv666”).value;，如何在 main.py 中获取 data.js 中的 huilv ？

你这个问题的本质是 前端 怎么向 py 后端 传送数据
前端一般是用 ajax
py 后端最好用一个框架比如 tornado ,django 等 ,启动一个服务,
伪代码:
def main():
if request.metod == ‘POST’

太监了,理解一下

phantomjs

前端一般 ajax 即可。可以百度 ajax 和 flask 等框架传递 json。里面有详细的例子

你需要用随便哪个 web 框架起个 http 服务，来接收 http 请求。如 flask，最简单的情况是
from flask import Flask, request
app = Flask(name)

.route(’/’, methods=[‘POST’])
def index():
data = request.json()
# blabla 写你自己的逻辑然后 return

app.run()

页面则用 ajax 发起请求

回到顶部