javascript - Flask: request.method = ='POST' 跳过 return 语句

Question

我的应用程序遇到一个奇怪的问题。

我正在做的是:我在 JS(客户端)中生成一个 csv 文件，然后将其发送到 Flask，然后使用 python 脚本过滤该文件，然后将其返回给客户端。

除了最后一部分之外，一切都很好。当涉及到return render_template时，它只是跳过该部分。这很奇怪，因为它位于 if request.method == 'POST' 内部。我打印了 if request.method=='POST' 内部的值，并且可以在服务器端看到这些值。

Flask 路线.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。例如，您可以简单地返回“更新成功”。

您可以通过从客户端手动重定向到结果页面来修复现有代码:

// 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发回的回复。