Flask：request.method =='POST' 跳过返回语句

Question

我的应用有一个奇怪的问题。

我正在做的是： 我在 JS（客户端）中生成一个 csv 文件，然后将其发送到烧瓶，然后我使用 python 脚本过滤文件，然后将其返回给客户端。

除了最后一部分，一切都很好。当涉及到 return 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;
    }
});

Answer 1

这里的问题是，当您应该提交表单时，您正在使用 AJAX。 AJAX 主要是关于在后台与服务器通信，但您正试图将它用作以编程方式提交 POST 表单数据的工具。使用 AJAX 将向服务器发送请求，就像单击链接或提交表单一样，但是浏览器不会导航到结果。这就是为什么您得出的结论是，flask 跳过了 render_template 调用，但模板确实被渲染了。只是通过 AJAX 调用，回复只会在 AJAX 成功回调中结束，而不是在浏览器的主窗口中。

在这样的 AJAX 请求的情况下，没有必要发回 HTML。例如，您可以简单地返回 "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
});

这就是你所需要的。现在浏览器会再次显示flask发回的回复。