js调用python|极客笔记

js调用python

在web开发中，JavaScript是一种非常常用的脚本语言，而Python也是一种流行的脚本语言。有时候我们需要在前端JavaScript代码中调用后端Python代码来处理一些业务逻辑，接下来我将详细介绍如何实现这一过程。

使用Ajax进行前后端通信

为了实现JavaScript调用Python，我们可以使用Ajax进行前后端通信。Ajax是一种用于创建快速动态网页的技术，能够实现页面的异步更新，不需要刷新整个页面。

我们在前端JavaScript代码中通过Ajax向后端发送请求，后端Python代码接收请求并处理，最后返回结果给前端JavaScript代码。

下面是一个简单的示例，演示了如何利用Ajax进行前后端通信并调用Python代码。

前端JavaScript代码

以下是一个简单的HTML页面，包含一个按钮和一个用于显示结果的<div>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript调用Python</title>
</head>
<body>
    <button id="callPythonBtn">调用Python</button>
    <div id="result"></div>

    <script>
        document.getElementById('callPythonBtn').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:5000/call_python', true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    document.getElementById('result').textContent = xhr.responseText;
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

在以上代码中，当我们点击按钮时，会向http://localhost:5000/call_python发送一个GET请求，并在<div>标签中显示返回的结果。

后端Python代码

接下来我们编写一个简单的Python后端代码，用于处理前端发送过来的请求。

from flask import Flask

app = Flask(__name__)

@app.route('/call_python')
def call_python():
    return 'Hello from Python!'

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

在以上代码中，当收到来自前端JavaScript的请求时，后端会返回一个字符串”Hello from Python!”。

运行结果

我们需要启动一个Flask服务器来运行后端Python代码。在命令行中输入以下命令：

python your_python_code.py

然后在浏览器中打开HTML页面，点击按钮，将会看到页面中显示”Hello from Python!”。

使用WebSocket进行实时通信

除了Ajax，我们还可以使用WebSocket进行实时通信，WebSocket是一种在单个交互中始终保持连接的协议，可以实现双向实时通信。

在这种情况下，我们可以使用Python的WebSocket库（如websockets）来建立WebSocket服务器，以便与前端JavaScript进行通信。

以下是一个简单的示例，演示如何使用WebSocket进行前后端通信并调用Python代码。

后端Python代码

import asyncio
import websockets

async def call_python(websocket, path):
    message = await websocket.recv()
    print(f"Received message from client: {message}")
    response = "Hello from Python!"
    await websocket.send(response)
    print(f"Sent message to client: {response}")

start_server = websockets.serve(call_python, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

在以上代码中，服务器将在localhost:8765处运行，并在收到来自客户端的消息后返回”Hello from Python!”。

前端JavaScript代码

const socket = new WebSocket('ws://localhost:8765');

socket.onopen = function() {
    console.log('Connected to Python');
    socket.send('Call Python');
};

socket.onmessage = function(event) {
    console.log('Message from Python: ' + event.data);
};

在以上代码中，当与Python建立连接后，前端JavaScript代码将向Python发送消息”Call Python”，并在接收到Python的响应后在控制台中打印消息。