我试图使用从前端到后端的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,2,3,虽然不能得到任何有效的结果。
在服务器控制台中,当我按下Submit button
时,我看到以下消息
"POST /update_mode HTTP/1.1" 302 -
"GET /decoder_graphical_view HTTP/1.1" 200
型
在调用POST方法后,有什么可能的方法来获得呈现的HTML?
2条答案
按热度按时间pb3skfrl1#
将发生代表该值的计算,并且该端点将返回HTML页面
这听起来像是普通FORM的任务,请考虑以下示例
templates/index.html
字符串
templates/current.html
型
application.py
型
niknxzdl2#
我猜
index.html
也在Flask应用程序模板中,否则当在JavaScript模块中调用fetch
时,您必须提供url,而不仅仅是/update_mode
路径。要重定向来自后端的响应,您只需将
window.location.href
更改为从后端发送的重定向响应模型中传递的url
。如下所示:字符串