javascript - Flask:request.method =='POST' 跳过返回语句
问题描述
我的应用程序有一个奇怪的问题。
我正在做的是:我在 JS(客户端)中生成一个 csv 文件,然后将其发送到烧瓶,然后使用 python 脚本过滤文件,然后将其返回给客户端。
除了最后一部分,一切都很好。当涉及到返回 render_template时,它只是跳过了那部分。这很奇怪,因为它进入了if request.method == 'POST'。我在if request.method=='POST'中打印了值,我可以在服务器端看到这些值。
烧瓶路线.py:
@app.route('/update_file', methods=['GET', 'POST'])
@login_required
def update_file():
'''Opens the filtered_file page but with updated file'''
clicked = None
if request.method == 'POST':
clicked = io.StringIO(request.form['data'])
file_to_filter = pd.read_csv(clicked, sep=',', engine='python', encoding='utf_8_sig')
table1 = update_csv(file_to_filter)
print(table1)
table2 = table1.to_html(classes='my_class" id = "my_id')
return render_template('3_filtered_file.html', data=table2)
这就是我在我的 html 模板上显示它的方式:
<div class="table-responsive">
{{data | safe}}
</div>
我已经对客户端上传的文件做了类似的处理,效果很好,但是这个有一个我似乎找不到的错误:/
编辑: 这是我发送 ajax 请求的 JS:
//On Update click renders table to csv, activates the be_filter and reopens it in the filtered_file.html
var isClicked;
jQuery("#update").on('click', function(){
var response = confirm('Are you sure you want to UPDATE rows ?');
if(response == true){
isClicked = $('#my_id').table2csv();
$.ajax({
type:'POST',
url:"{{url_for('update_file')}}",
data: {'data': isClicked}
});
//window.location.href='/update_file';
}else{
return false;
}
});
解决方案
这里的问题是,当您应该提交表单时,您正在使用 AJAX。AJAX 主要是关于在后台与服务器通信,但您正试图将其用作以编程方式提交 POST 表单数据的工具。使用 AJAX 将向服务器发送请求,就像单击链接或提交表单一样,但浏览器不会导航到结果。这就是为什么您得出的结论是,flask 跳过了render_template
调用,但模板确实被渲染了。只是通过 AJAX 调用,回复只会在 AJAX 成功回调中结束,而不是在浏览器的主窗口中。
在这样的 AJAX 请求的情况下,没有必要发回 HTML。例如,您可以简单地 return "update successful"
。
您可以通过从客户端手动重定向到结果页面来修复现有代码:
// in your $.ajax() options:
success: function(reply) {
if (reply == "update successful") location = "/table"; // URL of table view
else alert("server reports error");
}
在 AJAX 调用成功更新服务器上的 CSV 文件后,这将在客户端上重定向。
但是,您可以简单地提交一个实际的表单:
<form id="tableDataForm" method="post" action="{{url_for('update_file')}}">
<input type="hidden" name="data" id="tableData">
</form>
$("#update").on('click', function(){
$('#tableData').val($('#my_id').table2csv()); // insert data into hidden <input>
$('#tableDataForm').submit(); // send POST request
});
这就是你所需要的。现在浏览器将再次显示烧瓶发回的回复。
推荐阅读
- typescript - @testing-library/react Parcel 2 + Jest + TypeScript 堆栈的导入错误
- wordpress - 在 WooCommerce 的 minicart 上添加自定义文本
- linux - 如何禁用记录到 .mysql_history 文件
- php - 如何在php的搜索字符串中添加空格?
- javascript - 我总是得到 JSON 错误和未处理的承诺拒绝警告的循环结构。我该如何摆脱它?
- python - 如何为以下涉及两个循环的代码制作 python oneliner
- python - 从今天的特定时间获取上周一
- docker - 为什么每次我更改构建参数时 docker 都会重建所有层
- java - 是否可以在其他页面上写单词,例如来自 java 程序的 google 搜索框
- database - 具有 Gradle 运行配置的 Ktor 从环境变量中“无法解析对值的替换”