Flask后端+Vanilla JS前端：POST请求无法跳转至HTML页面求助

我需要将前端下拉框的值传递到后端，根据该值完成计算后，由对应端点返回HTML页面，不需要POST方法返回JSON响应（如return jsonify）。当前使用Flask作为后端、原生JS作为前端。

目前已成功通过POST方法将下拉框值传递到后端，服务器与浏览器控制台均无报错，但点击提交按钮后目标HTML页面没有被渲染出来。

前端代码 #

HTML文件（index.html） #

<label for="mode">Select Mode:</label>
<select id="mode" name="mode">
    <option value="autoencoder">Autoencoder</option>
    <option value="decoder">Decoder</option>
</select>
<button id="Module_submitBtn">Chose Module</button>

<script src="static/js/call_module.js "></script>

JS文件（call_module.js） #

function submitMode() {
    var selectedMode = document.getElementById("mode").value;

    fetch('/update_mode', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ mode: selectedMode })
    })
        .catch(error => console.error('Error:', error));
}

const submitBtn = document.getElementById('Module_submitBtn');
submitBtn.addEventListener('click', submitMode);

后端代码 #

Python文件 #

# 用于渲染HTML文件的目标端点
@app.route("/decoder_graphical_view", methods=['GET'])
def decoder_graphical_view(name=None):
    config_val = Decoder_Config.config_val
    return render_template("decoder_graph.html",
                           N_value=config_val["Decoder_live_plot"]["N_"],
                           ebno_value=config_val["Decoder_live_plot"]["ebno_"],
                           phi_value=config_val["Decoder_live_plot"]["phi_"],
                           learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
                           name=name
                           )

# 处理POST请求的端点，接收下拉框值并调用decoder_graphical_view函数
@app.route('/update_mode', methods=['POST'])
def update_mode(name=None):
    selected_mode = request.json.get('mode')

    if selected_mode == 'autoencoder':
        return redirect(url_for('decoder_graphical_view'))
    elif selected_mode == 'decoder':
        return redirect(url_for('decoder_graphical_view'))

我还尝试过以下update_mode写法，结果一致：

@app.route('/update_mode', methods=['POST'])
def update_mode(name=None):
    selected_mode = request.json.get('mode')
    # 设置配置数据的默认值
    Decoder_Config.config_val["Decoder_live_plot"]["N_"]     = 100
    Decoder_Config.config_val["Decoder_live_plot"]["ebno_"]  = 2.0
    Decoder_Config.config_val["Decoder_live_plot"]["phi_"]   = 5
    Decoder_Config.config_val["Decoder_live_plot"]["train_"] = "True"
    train_var = str(Decoder_Config.config_val["Decoder_live_plot"]["train_"]).lower()
    if train_var == "true":
        train_var = True
    else:
        train_var = False
    Decoder_Config.config_val["Decoder_live_plot"]["learning_rate_"]   = 0.005

    if selected_mode == 'autoencoder':
        print("selected_mode: ", selected_mode)
        return render_template("decoder_graph.html",
                                N_value=config_val["Decoder_live_plot"]["N_"],
                                ebno_value=config_val["Decoder_live_plot"]["ebno_"],
                                phi_value=config_val["Decoder_live_plot"]["phi_"],
                                learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
                                name=name
                                )

    elif selected_mode == 'decoder':
        return render_template("decoder_graph.html",
                                N_value=config_val["Decoder_live_plot"]["N_"],
                                ebno_value=config_val["Decoder_live_plot"]["ebno_"],
                                phi_value=config_val["Decoder_live_plot"]["phi_"],
                                learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
                                name=name
                                )

已尝试的方案 #

尝试过多种Flask重定向相关的方案，但均未解决问题。

点击提交按钮时，服务器控制台日志如下：

"POST /update_mode HTTP/1.1" 302 -
"GET /decoder_graphical_view HTTP/1.1" 200

问题核心是fetch API不会自动处理重定向跳转：服务器返回302后，fetch会自动跟随请求获取目标页面内容，但不会更新浏览器URL或渲染页面。有两种解决方法：

方法一：修改fetch响应处理逻辑 #

在fetch的.then中手动处理重定向跳转：

function submitMode() {
    var selectedMode = document.getElementById("mode").value;

    fetch('/update_mode', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ mode: selectedMode })
    })
    .then(response => {
        // 检测到重定向时手动跳转
        if (response.redirected) {
            window.location.href = response.url;
        }
    })
    .catch(error => console.error('Error:', error));
}

方法二：改用原生表单提交（无需fetch） #

如果不需要异步处理，直接用HTML表单提交更简单，无需JS：

<form action="/update_mode" method="POST">
    <label for="mode">Select Mode:</label>
    <select id="mode" name="mode">
        <option value="autoencoder">Autoencoder</option>
        <option value="decoder">Decoder</option>
    </select>
    <button type="submit">Chose Module</button>
</form>

同时修改后端接收参数的方式（表单提交的是form-data，而非JSON）：

@app.route('/update_mode', methods=['POST'])
def update_mode(name=None):
    # 改用form.get获取参数
    selected_mode = request.form.get('mode')
    
    # 后续逻辑保持不变
    if selected_mode == 'autoencoder':
        return redirect(url_for('decoder_graphical_view'))
    elif selected_mode == 'decoder':
        return redirect(url_for('decoder_graphical_view'))

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