无需jQuery：从JavaScript异步调用Python函数的最佳方案

嘿，这个问题问到点子上了！因为浏览器里的JavaScript和后端的Python压根不在一个运行环境里，没法直接“调用”函数——得靠HTTP请求搭个桥才行，这也是不用jQuery时的最佳方案。下面给你一步步讲清楚：

你得用Python的Web框架（比如轻量的Flask，或者更现代的FastAPI）把你的处理函数包装成一个HTTP接口，让前端能通过请求访问它。

举个Flask的简单例子：

from flask import Flask, request, jsonify
from flask_cors import CORS  # 解决跨域问题用，后面会讲

app = Flask(__name__)
CORS(app)  # 开发阶段可以先放开所有跨域请求，生产环境要指定域名

# 你的核心处理函数
def process_user_input(input_content):
    # 这里写你的业务逻辑，比如文本处理、数据计算啥的
    return f"处理完成：{input_content.strip().upper()}"

# 定义接收请求的API路由
@app.route('/api/process-input', methods=['POST'])
def handle_input():
    # 获取前端传过来的JSON数据
    request_data = request.get_json()
    user_input = request_data.get('input')
    
    if not user_input:
        return jsonify({'error': '请提供输入内容'}), 400
    
    # 调用处理函数得到结果
    processed_result = process_user_input(user_input)
    # 返回JSON格式的响应
    return jsonify({'result': processed_result})

if __name__ == '__main__':
    app.run(debug=True, port=5000)

不用jQuery的话，浏览器原生的fetch() API就是最佳选择——它支持Promise，写法简洁，现在主流浏览器都支持。

给你写个HTML+JS的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>调用Python函数示例</title>
</head>
<body>
    <div>
        <input type="text" id="userInput" placeholder="请输入内容...">
        <button onclick="submitInput()">提交处理</button>
    </div>
    <div id="resultArea" style="margin-top: 20px;"></div>

    <script>
        async function submitInput() {
            const inputElement = document.getElementById('userInput');
            const resultArea = document.getElementById('resultArea');
            const userInput = inputElement.value.trim();

            if (!userInput) {
                resultArea.textContent = '请输入要处理的内容哦';
                return;
            }

            try {
                // 发送POST请求到后端API
                const response = await fetch('http://localhost:5000/api/process-input', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ input: userInput }) // 把输入转成JSON字符串
                });

                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }

                // 解析后端返回的JSON数据
                const responseData = await response.json();
                resultArea.textContent = responseData.result;
            } catch (error) {
                // 捕获并展示错误信息
                resultArea.textContent = `出错啦：${error.message}`;
            }
        }
    </script>
</body>
</html>

• 跨域问题：如果前端和后端不在同一个域名/端口（比如前端是本地静态文件，后端是localhost:5000），浏览器会拦截请求。上面Flask代码里的CORS(app)就是用来解决这个的，生产环境记得改成指定允许的域名，别随便放开。
• 请求格式：前端要设置Content-Type: application/json，并且把数据转成JSON字符串；后端要用request.get_json()来解析，要是用表单格式的话，后端得对应处理request.form。
• 错误处理：一定要加try/catch，覆盖网络失败、后端返回错误状态码这些情况，给用户友好的提示，别让页面直接挂掉。
• 生产环境选型：如果是上线项目，更推荐用FastAPI代替Flask，它性能更高，自带类型校验和自动API文档，开发体验更好。

内容的提问来源于stack exchange，提问作者Pavan Kandru