如何用Flask为HTML输入文本框设置值？（Python 2.7）

嘿，我来帮你搞定这个需求～结合你现有的submit_textarea函数，实现点击按钮给其他输入框设值，主要分两种场景，看你是否需要后端参与数据处理：

场景1：前端直接设置（无需后端数据） #

如果要设置的是固定文本，完全不需要走后端接口，直接用JavaScript就能搞定，响应还快。

你只需要在index.html里给按钮绑定点击事件，找到目标输入框并设置它的value即可：

<!-- index.html 中的相关代码 -->
<input type="text" id="target-input" placeholder="待设置的输入框">
<button id="set-value-btn">点击设置指定文本</button>

<script>
// 给按钮绑定点击事件
document.getElementById('set-value-btn').addEventListener('click', function() {
    // 替换成你想要设置的指定文本
    const specifiedText = '这是要填入输入框的内容';
    // 找到目标输入框并赋值
    document.getElementById('target-input').value = specifiedText;
});
</script>

场景2：通过后端接口获取文本并设置 #

如果要设置的文本需要从后端获取（比如从文件、数据库读取，或者后端生成），那就需要新增一个Flask接口，前端点击按钮时发请求拿数据，再设置到输入框里。

第一步：修改Flask后端代码 #

在现有代码基础上新增一个接口，用来返回要设置的指定文本：

# app.py 完整代码示例
from flask import Flask, request, render_template, jsonify
import codecs

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def submit_textarea():
    if request.method == 'POST':
        text = request.form.get("text") 
        # 用with语句处理文件更安全，自动关闭文件
        with codecs.open('output.txt', 'w', 'utf-8') as outfile:
            outfile.write(text)
    return render_template("index.html")

# 新增接口：返回要设置的指定文本
@app.route('/get-specified-text')
def get_specified_text():
    # 这里可以根据需求从文件、数据库读取，或者直接返回固定值
    # 比如模拟从output.txt读取内容来设置（示例）
    try:
        with codecs.open('output.txt', 'r', 'utf-8') as infile:
            specified_text = infile.read()
    except FileNotFoundError:
        specified_text = '默认的指定文本'
    return jsonify({'text': specified_text})

第二步：修改前端HTML代码 #

在index.html里添加按钮和对应的JavaScript请求逻辑：

<!-- index.html 中的相关代码 -->
<input type="text" id="target-input" placeholder="待设置的输入框">
<button id="set-value-btn">从后端获取并设置文本</button>

<script>
document.getElementById('set-value-btn').addEventListener('click', function() {
    // 向后端接口发请求获取文本
    fetch('/get-specified-text')
        .then(response => response.json())
        .then(data => {
            // 将获取到的文本设置到输入框
            document.getElementById('target-input').value = data.text;
        })
        .catch(error => {
            console.error('获取文本失败:', error);
            alert('设置失败，请稍后重试');
        });
});
</script>

小提示 #

你原来的submit_textarea函数里，直接打开文件后记得关闭，或者用with语句（我在上面的代码里已经修改了），这样能避免文件句柄泄漏的问题哦～

内容的提问来源于stack exchange，提问作者Razan Balatiah