[教程]Python在JS中调用：掌握跨语言交互技巧，轻松实现代码复用

引言随着Web技术的发展，JavaScript成为了前端开发的主流语言。然而，在处理一些复杂或计算密集型的任务时，JavaScript的性能可能无法满足需求。这时，引入Python等后端语言进行计算处...

引言

随着Web技术的发展，JavaScript成为了前端开发的主流语言。然而，在处理一些复杂或计算密集型的任务时，JavaScript的性能可能无法满足需求。这时，引入Python等后端语言进行计算处理，再由JavaScript进行界面展示，成为一种常见的解决方案。本文将详细介绍如何在JavaScript中调用Python代码，实现跨语言交互。

一、概述

在JavaScript中调用Python代码，主要分为以下几种方式：

1. 使用Python的HTTP服务
2. 使用Python的Web框架
3. 使用Python的命令行工具
4. 使用Python的远程过程调用（RPC）

本文将重点介绍第一种和第二种方式。

二、使用Python的HTTP服务

1. 使用Flask创建HTTP服务

首先，我们需要安装Flask：

pip install flask

然后，创建一个名为app.py的文件，并编写以下代码：

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/add', methods=['POST'])
def add(): data = request.get_json() a = data['a'] b = data['b'] result = a + b return jsonify({'result': result})
if __name__ == '__main__': app.run(host='0.0.0.0', port=5000)

这段代码创建了一个简单的HTTP服务，用于处理/add接口的POST请求。请求中包含两个数字，服务将返回它们的和。

2. 在JavaScript中调用Python服务

使用fetch函数向Python服务发送请求：

async function add(a, b) { const response = await fetch('http://localhost:5000/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ a, b }) }); const result = await response.json(); return result.result;
}
// 使用示例
add(2, 3).then(result => { console.log(result); // 输出: 5
});

三、使用Python的Web框架

除了Flask，还可以使用其他Python Web框架，如Django和FastAPI。以下以Django为例：

1. 创建Django项目

pip install django
django-admin startproject myproject
cd myproject

2. 创建Django应用

python manage.py startapp myapp

3. 编写视图函数

在myapp/views.py文件中，编写以下代码：

from django.http import JsonResponse
def add(request): a = request.POST.get('a') b = request.POST.get('b') result = int(a) + int(b) return JsonResponse({'result': result})

4. 配置URL

在myapp/urls.py文件中，编写以下代码：

from django.urls import path
from . import views
urlpatterns = [ path('add/', views.add, name='add'),
]

5. 配置Django项目

在myproject/settings.py文件中，添加以下配置：

INSTALLED_APPS = [ ... 'myapp',
]

6. 运行Django项目

python manage.py runserver 0.0.0.0:5000

7. 在JavaScript中调用Django服务

与调用Flask服务类似，使用fetch函数发送请求：

async function add(a, b) { const response = await fetch('http://localhost:5000/add/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `a=${a}&b=${b}` }); const result = await response.json(); return result.result;
}
// 使用示例
add(2, 3).then(result => { console.log(result); // 输出: 5
});

四、总结

通过以上方法，我们可以在JavaScript中调用Python代码，实现跨语言交互。这种方式可以充分发挥Python在数据处理和计算方面的优势，同时利用JavaScript进行前端开发。在实际项目中，可以根据具体需求选择合适的方法。