如何让Flask记住用户选择不刷新模板 解决聊天机器人弹窗重置问题

核心问题：你当前用的是传统同步表单提交，每次提交都会触发页面整体刷新，Flask重新渲染整个页面，所以之前的弹窗打开状态、单选框选择状态都会重置，这是正常现象。你用e.preventDefault()没生效大概率是事件绑定逻辑有问题，没有正确阻止表单的默认提交行为。

以下是两种可行解决方案： #

方案1：使用AJAX异步提交（推荐，体验更好） #

无需刷新页面即可完成提问和回复加载，原有页面状态全部保留。

后端修改

调整接口返回JSON格式数据，而非渲染整个页面：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

# 单独拆分预测接口，仅处理请求返回结果
@app.route('/predict',methods=['POST'])
def predict():
    if request.method == 'POST':
        messages = request.form['message']
        # 原有预测逻辑保留，生成my_prediction
        my_prediction = "这里是你的机器人回复内容"
        return jsonify({
            "bot_message": my_prediction,
            "user_message": messages
        })

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=4000, debug=True)

前端修改

绑定表单提交事件，阻止默认刷新行为，异步请求后手动插入消息到聊天框：

document.addEventListener('DOMContentLoaded', function() {
    // 替换为你实际的聊天提交表单ID、输入框ID
    const chatForm = document.getElementById('chat-form');
    const userInput = document.getElementById('user-input');
    const chatBody = document.querySelector('.chat-body');

    chatForm.addEventListener('submit', function(e) {
        // 阻止表单默认提交刷新行为
        e.preventDefault();
        const inputContent = userInput.value.trim();
        if (!inputContent) return;

        const formData = new FormData();
        formData.append('message', inputContent);

        // 发送异步请求
        fetch('/predict', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            // 插入用户消息
            const userMsg = document.createElement('div');
            userMsg.className = 'chat-bubble you';
            userMsg.textContent = data.user_message;
            chatBody.appendChild(userMsg);

            // 插入机器人回复
            const botMsg = document.createElement('div');
            botMsg.className = 'chat-bubble me';
            botMsg.textContent = data.bot_message;
            chatBody.appendChild(botMsg);

            // 清空输入框
            userInput.value = '';
        })
    })
})

方案2：同步提交保留状态（兼容低需求场景） #

如果不想改异步提交，可以通过回传状态的方式保留之前的选择：

1. 后端接收单选框选中值，渲染模板时回传给前端

@app.route('/',methods=['POST', 'GET'])
def predict():
    selected_radio = ''
    bot_message = ''
    user_message = ''
    if request.method == 'POST':
        user_message = request.form['message']
        selected_radio = request.form.get('radiobutton', '')
        # 原有预测逻辑
        my_prediction = "机器人回复内容"
        bot_message = my_prediction
    return render_template('index.html', 
        bot_message=bot_message, 
        user_message=user_message,
        selected_radio=selected_radio
    )

2. 前端模板绑定状态，自动恢复选中项和弹窗状态

<!-- 单选框增加选中判断 -->
<input id="faqact" type="radio" value="faqact" name="radiobutton" {% if selected_radio == 'faqact' %}checked{% endif %}>
<label for="faqact" type="button">Ask a question or something.</label>
<input id="alexact" name="radiobutton" value="alexact" type="radio" {% if selected_radio == 'alexact' %}checked{% endif %}>
<label for="alexact" type="button">I want to make the BOT do something for me!</label>
<input id="connectact" name="radiobutton" value="connectact" type="radio" {% if selected_radio == 'connectact' %}checked{% endif %}>
<label for="connectact" type="button">I want to connect to a human asap!</label>

<!-- 聊天框自动显示 -->
<div class="chat-body {% if not bot_message %}hide{% endif %}">

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