Flask:在jQuery ajax $ .post调用之后呈现页面

Question

我将带有jQuery $ .post()的表单中的数据发送到flask函数.该函数对数据进行了一些长时间的运算.在这种情况下,我不想发回一些HTML,而是渲染一个新模板.当我用jQuery/AJAX调用函数时,我该怎么做？

表格:

<form id='myform'>
    <input type='text'> some input...
    <input type='button' value='send form' id='mybutton'>
</form>

表单输入的计算需要一些时间,所以我用jQuery发送它:

$.("#mybutton").click(function() {
    // get the data in form
    $exampledata = 'foo'
    $.post("/some/flask/function", {'data': $exampledata}, function(response) {
      can I render a new template here with data from flask function?
    });
});

在flask中,相应的函数如下所示:

@app.route('/some/flask/function', methods=['POST'])
def longCalculation():        
    form = request.form
    data = form['data']

    result = runTheLongCalculation(data)
    this does not work -->
    return render_template('result.html',r=result)
    how can I render a new template after an jQuery/AJAX call?

我不想发回重定向URL和JSON,但实际上是渲染模板.

Answer 1

如果您渲染的模板只是一段 HTML，您可以像 Flask 代码中所示那样返回它，并在浏览器中执行以下操作：

$.("#mybutton").click(function() {
    // get the data in form
    $exampledata = 'foo'
    $.post("/some/flask/function", {'data': $exampledata}, function(response) {
        var myDiv = $('#resultarea'); // The place where you want to inser the template
        myDiv.html(response);
    });
});

这期望你的 Flask 模板看起来像这样：

<div id='result'>
    {{ result }}
</div>

它可以更大，但我们将其插入页面内，因此没有侧边栏、菜单导航或 html/body 标记，只是一段简单的 HTML。

如果您使用 Flask 函数发回一个完全成熟的 HTML 页面，就会出现问题，因为它将无法在现有页面中正确呈现。