JS与Python如何实现高效通信？-杰瑞科技汇

下面我将从几种主流的通信方式入手,详细介绍它们的原理、优缺点和具体实现。

（图片来源网络，侵删）

核心思想

无论采用哪种方式,核心思想都是一致的：

JavaScript (前端) 作为客户端，负责发起请求。
Python (后端) 作为服务器，负责接收请求、处理业务逻辑，并返回响应。
两者通过HTTP协议进行数据交换，数据格式通常是 JSON，因为它轻量、易于被两种语言解析。

RESTful API (最常用、最标准)

这是目前最主流、最通用的通信方式，Python 后端暴露一组 URL 接口（端点），前端通过 HTTP 请求（GET, POST, PUT, DELETE 等）来调用这些接口。

工作流程

前端 (JavaScript)：使用 fetch API 或 axios 库向 Python 服务器的一个特定 URL 发送 HTTP 请求，可以携带数据（在请求体或 URL 参数中）。
网络传输：请求通过 HTTP 协议发送到服务器。
后端 (Python)：使用 Web 框架（如 Flask, Django, FastAPI）监听特定 URL，接收请求，解析数据，执行相应的 Python 代码（查询数据库、进行计算等）。
后端返回响应：Python 服务器将处理结果打包成 JSON 格式，通过 HTTP 响应返回给前端。
前端接收响应：JavaScript 接收 JSON 响应，解析后更新页面内容或进行其他操作。

技术栈选择

组件	推荐技术	说明
Python 后端	Flask (轻量) / FastAPI (高性能) / Django (全功能)	Flask 简单易学，适合小型项目，FastAPI 性能极高，支持异步，且自动生成 API 文档，Django 功能全面，自带后台管理。
JavaScript 前端	原生 `fetch` API / `axios` 库	`fetch` 是浏览器内置的，无需额外安装。`axios` 更简洁，提供了更好的错误处理和请求/响应拦截功能，非常流行。
数据格式	JSON	几乎是 Web API 的标准，易于阅读和解析。

示例：使用 Flask 和 Fetch API 实现通信

这是一个完整的“Hello, World”级别的例子。

Python 后端 (使用 Flask)

你需要安装 Flask：

（图片来源网络，侵删）

pip install Flask

创建一个文件 app.py：

# app.py
from flask import Flask, jsonify, request
app = Flask(__name__)
# 定义一个路由，用于处理 GET 请求
@app.route('/api/hello', methods=['GET'])
def hello_world():
    # 从 URL 参数中获取名字，默认为 'World'
    name = request.args.get('name', 'World')
    # 返回一个 JSON 响应
    return jsonify({
        "message": f"Hello, {name}!",
        "status": "success"
    })
# 定义一个路由，用于处理 POST 请求
@app.route('/api/echo', methods=['POST'])
def echo():
    # 从请求体中获取 JSON 数据
    data = request.get_json()
    if not data or 'text' not in data:
        return jsonify({"error": "Missing 'text' in request body"}), 400
    # 返回接收到的数据
    return jsonify({
        "original_text": data['text'],
        "status": "received"
    })
if __name__ == '__main__':
    # 在调试模式下运行服务器，监听所有网络接口的 5000 端口
    app.run(debug=True, host='0.0.0.0', port=5000)

运行 Python 服务器：

python app.py

服务器将在 http://127.0.0.1:5000 启动。

JavaScript 前端 (使用 Fetch API)

创建一个 HTML 文件 index.html：

（图片来源网络，侵删）

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">JS-Python Communication</title>
</head>
<body>
    <h1>JS-Python Communication Demo</h1>
    <div>
        <button id="getBtn">Send GET Request</button>
        <p id="get-result"></p>
    </div>
    <hr>
    <div>
        <input type="text" id="postInput" placeholder="Enter some text to send">
        <button id="postBtn">Send POST Request</button>
        <p id="post-result"></p>
    </div>
    <script>
        // 获取 DOM 元素
        const getBtn = document.getElementById('getBtn');
        const get_result = document.getElementById('get-result');
        const postBtn = document.getElementById('postBtn');
        const postInput = document.getElementById('postInput');
        const post_result = document.getElementById('post-result');
        // --- GET 请求示例 ---
        getBtn.addEventListener('click', async () => {
            try {
                // 向 Python 服务器发送 GET 请求，并携带 name 参数
                const response = await fetch('http://127.0.0.1:5000/api/hello?name=JavaScript');
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 将响应体解析为 JSON
                const data = await response.json();
                // 在页面上显示结果
                get_result.textContent = `Response: ${data.message}`;
            } catch (error) {
                get_result.textContent = `Error: ${error.message}`;
                console.error("Fetch GET Error:", error);
            }
        });
        // --- POST 请求示例 ---
        postBtn.addEventListener('click', async () => {
            const textToSend = postInput.value;
            if (!textToSend) {
                post_result.textContent = 'Please enter some text first.';
                return;
            }
            try {
                // 配置 POST 请求
                const response = await fetch('http://127.0.0.1:5000/api/echo', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json', // 告诉服务器我们发送的是 JSON
                    },
                    // 将 JavaScript 对象转换为 JSON 字符串作为请求体
                    body: JSON.stringify({ text: textToSend }), 
                });
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                post_result.textContent = `Server received: "${data.original_text}"`;
                postInput.value = ''; // 清空输入框
            } catch (error) {
                post_result.textContent = `Error: ${error.message}`;
                console.error("Fetch POST Error:", error);
            }
        });
    </script>
</body>
</html>

运行前端：直接用浏览器打开 index.html 文件，点击按钮即可看到与 Python 服务器的交互结果。

WebSocket (实时双向通信)

如果你的应用需要实时、双向的数据交换（聊天应用、实时游戏、股票行情更新），RESTful API 就不太合适了，因为它通常是请求-响应模式，这时，WebSocket 是最佳选择。

工作流程

前端 (JavaScript)：发起一个 WebSocket 连接请求到 Python 服务器。
后端 (Python)：接受连接，建立一个持久的、双向的通信通道。
双向通信：之后，任何一方都可以随时向另一方发送消息，无需等待请求，连接会一直保持，直到被任一方关闭。

技术栈选择

组件	推荐技术	说明
Python 后端	FastAPI / Django Channels / websockets 库	FastAPI 内置了对 WebSocket 的优秀支持，Django Channels 扩展了 Django，使其能处理 HTTP 和 WebSocket。`websockets` 是一个轻量级的库。
JavaScript 前端	原生 `WebSocket` API	浏览器内置，非常简单。

示例：使用 FastAPI 和 WebSocket API

Python 后端 (使用 FastAPI)

安装 FastAPI 和 Uvicorn (ASGI 服务器)：

pip install "fastapi[all]" uvicorn

创建 main.py 文件：

# main.py
from fastapi import FastAPI, WebSocket
import asyncio
app = FastAPI()
# 存储所有连接的 WebSocket 客户端
connected_clients = set()
@app.websocket("/ws")
async def websocket

JS与Python如何实现高效通信？

核心思想

RESTful API (最常用、最标准)

工作流程

技术栈选择

示例：使用 Flask 和 Fetch API 实现通信

Python 后端 (使用 Flask)

JavaScript 前端 (使用 Fetch API)

WebSocket (实时双向通信)

工作流程

技术栈选择

示例：使用 FastAPI 和 WebSocket API

Python 后端 (使用 FastAPI)

99ANYc3cd6

Python中except与raise如何协同处理异常？

mac系统如何从u盘启动？

ArrayList和数组有何区别？

HBase Thrift Python如何连接与使用？

Java数组和ArrayList到底该用哪个？

HDR Light Studio教程如何快速上手？

matplotlib安装失败怎么办？

Java与C的byte类型有何区别？

Python NLTK如何实现相似度计算？

Ryan Mitchell的Python书适合零基础入门吗？

Python脚本文件如何运行？

Python如何输出项目依赖requirements.txt？

FL Studio 12教程如何快速上手制作音乐？

Python2与Python3如何共存安装？

Java中decode与encode有何区别？

Python如何对OHLC数据进行重采样？

JS与Python如何实现高效通信？

核心思想

RESTful API (最常用、最标准)

工作流程

技术栈选择

示例：使用 Flask 和 Fetch API 实现通信

Python 后端 (使用 Flask)

JavaScript 前端 (使用 Fetch API)

WebSocket (实时双向通信)

工作流程

技术栈选择

示例：使用 FastAPI 和 WebSocket API

Python 后端 (使用 FastAPI)

相关推荐

HDR Light Studio教程如何快速上手？