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

kx7yvsdv  于 2023-11-15  发布在  其他
关注(0)|答案(2)|浏览(186)

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

前端

HTML文件,用index.html编写

  1. <label for="mode">Select Mode:</label>
  2. <select id="mode" name="mode">
  3. <option value="autoencoder">Autoencoder</option>
  4. <option value="decoder">Decoder</option>
  5. </select>
  6. <button id="Module_submitBtn">Chose Module</button>
  7. <script src="static/js/call_module.js "></script>

字符串

JS文件

  1. function submitMode() {
  2. var selectedMode = document.getElementById("mode").value;
  3. fetch('/update_mode', {
  4. method: 'POST',
  5. headers: {
  6. 'Content-Type': 'application/json'
  7. },
  8. body: JSON.stringify({ mode: selectedMode })
  9. })
  10. .catch(error => console.error('Error:', error));
  11. }
  12. const submitBtn = document.getElementById('Module_submitBtn');
  13. submitBtn.addEventListener('click', submitMode);

后台

Python文件

  1. # This is the desired endpiunt from where HTML file is rendered
  2. @app.route("/decoder_graphical_view", methods=['GET'])
  3. def decoder_graphical_view(name=None):
  4. config_val = Decoder_Config.config_val
  5. return render_template("decoder_graph.html",
  6. N_value=config_val["Decoder_live_plot"]["N_"],
  7. ebno_value=config_val["Decoder_live_plot"]["ebno_"],
  8. phi_value=config_val["Decoder_live_plot"]["phi_"],
  9. learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
  10. name=name
  11. )
  12. # This is the endpoint where POST method will work, dropdown value will come and it will call `decoder_graphical_view` function
  13. @app.route('/update_mode', methods=['POST'])
  14. def update_mode(name=None):
  15. selected_mode = request.json.get('mode')
  16. if selected_mode == 'autoencoder':
  17. return redirect(url_for('decoder_graphical_view'))
  18. elif selected_mode == 'decoder':
  19. return redirect(url_for('decoder_graphical_view'))


我也尝试了update_mode function在以下方式,但同样的结果和失败.

  1. @app.route('/update_mode', methods=['POST'])
  2. def update_mode(name=None):
  3. selected_mode = request.json.get('mode')
  4. # set default value for the config data
  5. Decoder_Config.config_val["Decoder_live_plot"]["N_"] = 100
  6. Decoder_Config.config_val["Decoder_live_plot"]["ebno_"] = 2.0
  7. Decoder_Config.config_val["Decoder_live_plot"]["phi_"] = 5
  8. Decoder_Config.config_val["Decoder_live_plot"]["train_"] = "True"
  9. train_var = str(Decoder_Config.config_val["Decoder_live_plot"]["train_"]).lower()
  10. if train_var == "true":
  11. train_var = True
  12. else:
  13. train_var = False
  14. Decoder_Config.config_val["Decoder_live_plot"]["learning_rate_"] = 0.005
  15. if selected_mode == 'autoencoder':
  16. print("selected_mode: ", selected_mode)
  17. return render_template("decoder_graph.html",
  18. N_value=config_val["Decoder_live_plot"]["N_"],
  19. ebno_value=config_val["Decoder_live_plot"]["ebno_"],
  20. phi_value=config_val["Decoder_live_plot"]["phi_"],
  21. learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
  22. name=name
  23. )
  24. elif selected_mode == 'decoder':
  25. return render_template("decoder_graph.html",
  26. N_value=config_val["Decoder_live_plot"]["N_"],
  27. ebno_value=config_val["Decoder_live_plot"]["ebno_"],
  28. phi_value=config_val["Decoder_live_plot"]["phi_"],
  29. learningRate_value=config_val["Decoder_live_plot"]["learning_rate_"],
  30. name=name
  31. )

试用

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

  1. "POST /update_mode HTTP/1.1" 302 -
  2. "GET /decoder_graphical_view HTTP/1.1" 200


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

pb3skfrl

pb3skfrl1#

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

  1. <html>
  2. <body>
  3. <form method="POST" action="/current">
  4. <label for="what">I want to know current</label>
  5. <select name="what" id="what">
  6. <option value="y">year</option>
  7. <option value="m">month</option>
  8. <option value="d">value</option>
  9. </select>
  10. <input type="submit">
  11. </form>
  12. </body>
  13. </html>

字符串
templates/current.html

  1. <html>
  2. <body>
  3. {{answer}}
  4. </body>
  5. </html>


application.py

  1. import datetime
  2. from flask import Flask, render_template, request
  3. app = Flask(__name__)
  4. @app.get("/")
  5. def hello():
  6. return render_template("index.html")
  7. @app.post("/current")
  8. def current():
  9. what = request.form["what"]
  10. today = datetime.date.today()
  11. if what=="y":
  12. answer = today.strftime("Year is %Y")
  13. elif what=="m":
  14. answer = today.strftime("Month is %m")
  15. elif what=="d":
  16. answer = today.strftime("Day is %d")
  17. else:
  18. answer = "Not supported"
  19. return render_template("current.html", answer=answer)
  20. if __name__ == "__main__":
  21. app.run()

  • (在 flask 2.3.2中测试)*
展开查看全部
niknxzdl

niknxzdl2#

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

  1. fetch('/update_mode', {
  2. method: 'POST',
  3. headers: {
  4. 'Content-Type': 'application/json'
  5. },
  6. body: JSON.stringify({ mode: selectedMode })
  7. })
  8. .then((response) => {
  9. if (response.redirected) {
  10. window.location.href = response.url;
  11. }
  12. })
  13. .catch(error => console.error('Error:', error));

字符串

展开查看全部

相关问题