HTML表单无法调用QA.py返回结果，直接打开Python文件的技术求助

核心问题分析 #

• 浏览器无法直接执行Python脚本，直接将QA.py设为form的action会导致浏览器直接下载/打开该文件，而非运行脚本处理请求。
• 当前HTML的onsubmit属性存在语法错误（缺少闭合双引号），且未实现异步请求逻辑，无法在不刷新页面的情况下传递数据并接收结果。
• 现有QA.py是命令行交互逻辑，无法处理HTTP请求，需要改成后端接口形式。

具体修改步骤 #

1. 修复HTML语法并添加AJAX逻辑 #

修正HTML语法错误，添加JavaScript异步请求逻辑，实现页面内数据交互：

<div class="form">
    <form action="#" method="POST" onsubmit="return false;">
        <label for="form-search"></label>
        <input type="text" id="form-search" placeholder="Search code">

        <!-- BUTTONS -->
        <input type="submit" value="code Search" id="code_search" onclick="processQuery()">
    </form>

    <p>Answer: </p>
    <p id='output'></p>
</div>

<script>
function processQuery() {
    // 获取输入框内容
    const query = document.getElementById('form-search').value;
    const outputElement = document.getElementById('output');

    // 发送异步请求到后端接口
    fetch('/qa', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: query }),
    })
    .then(response => response.json())
    .then(data => {
        // 将结果展示到页面指定区域
        outputElement.textContent = data.answer;
    })
    .catch(error => {
        outputElement.textContent = '请求出错：' + error.message;
    });
}
</script>

2. 改造Python脚本为后端接口（基于Flask框架） #

先安装依赖：pip install flask openai，然后将QA.py修改为处理HTTP请求的后端服务：

from flask import Flask, request, jsonify
import openai

app = Flask(__name__)

# 配置OpenAI API密钥（建议通过环境变量设置，避免硬编码泄露）
openai.api_key = "你的OpenAI API密钥"

@app.route('/qa', methods=['POST'])
def handle_qa():
    # 接收前端传递的查询内容
    data = request.get_json()
    user_query = data.get('query', '')
    
    if not user_query:
        return jsonify({'answer': '请输入查询内容'}), 400
    
    # 调用OpenAI生成回答
    QT = f"Q: {user_query}  ? A:"
    response = openai.Completion.create(
        model="text-davinci-003",
        prompt=QT,
        temperature=0,
        max_tokens=64,
        top_p=1,
        frequency_penalty=0,
        presence_penalty=0,
        stop=["\n\n"]
    )
    
    # 提取并返回回答结果
    answer = response.choices[0].text.strip()
    return jsonify({'answer': answer})

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

3. 运行测试 #

1. 执行python QA.py启动Flask后端服务
2. 在浏览器中打开HTML页面，输入查询内容后点击提交，即可在页面的output区域看到处理结果，不会再打开Python文件。

关键注意事项 #

• 生产环境需关闭Flask的debug=True，改用Gunicorn等正式WSGI服务器。
• 若HTML页面与后端服务跨域，需安装flask-cors并添加CORS(app)配置。
• OpenAI API密钥建议通过环境变量读取，如openai.api_key = os.getenv("OPENAI_API_KEY")。

内容的提问来源于stack exchange，提问作者Piyush Verma