POST方法无法重定向到HTML页面(后端Flask,前端Vanilla JS)

kx7yvsdv  于 11个月前  发布在  其他
关注(0)|答案(2)|浏览(150)

我试图使用从前端到后端的Flask的值,代表Vanilla JS的值计算将发生,端点将返回一个HTML页面。想添加的是,我不需要从POST方法获得任何响应(例如:return jsonify)。到目前为止,我使用Flask的后端和前端Vanilla JS
我已经成功地通过并取得了在后端使用POST方法的数据值。我也检查了从服务器和浏览器控制台,没有发现错误。
我采取的方法做得很远:

前端

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文件

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文件

# This is the desired endpiunt from where HTML file is rendered
@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
                           )

# This is the endpoint where POST method will work, dropdown value will come and it will call `decoder_graphical_view` function
@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 function在以下方式,但同样的结果和失败.

@app.route('/update_mode', methods=['POST'])
def update_mode(name=None):
    selected_mode = request.json.get('mode')
    # set default value for the config data
    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
                                )

试用

到目前为止,我已经尝试了下面列出的:1,23,虽然不能得到任何有效的结果。
在服务器控制台中,当我按下Submit button时,我看到以下消息

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


在调用POST方法后,有什么可能的方法来获得呈现的HTML?

pb3skfrl

pb3skfrl1#

将发生代表该值的计算,并且该端点将返回HTML页面
这听起来像是普通FORM的任务,请考虑以下示例
templates/index.html

<html>
<body>
<form method="POST" action="/current">
<label for="what">I want to know current</label>
<select name="what" id="what">
<option value="y">year</option>
<option value="m">month</option>
<option value="d">value</option>
</select>
<input type="submit">
</form>
</body>
</html>

字符串
templates/current.html

<html>
<body>
{{answer}}
</body>
</html>


application.py

import datetime
from flask import Flask, render_template, request
app = Flask(__name__)
@app.get("/")
def hello():
    return render_template("index.html")
@app.post("/current")
def current():
    what = request.form["what"]
    today = datetime.date.today()
    if what=="y":
        answer = today.strftime("Year is %Y")
    elif what=="m":
        answer = today.strftime("Month is %m")
    elif what=="d":
        answer = today.strftime("Day is %d")
    else:
        answer = "Not supported"
    return render_template("current.html", answer=answer)
if __name__ == "__main__":
    app.run()

  • (在 flask 2.3.2中测试)*
niknxzdl

niknxzdl2#

我猜index.html也在Flask应用程序模板中,否则当在JavaScript模块中调用fetch时,您必须提供url,而不仅仅是/update_mode路径。
要重定向来自后端的响应,您只需将window.location.href更改为从后端发送的重定向响应模型中传递的url。如下所示:

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));

字符串

相关问题