jquery - 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 页面，就会出现问题，因为它将无法在现有页面中正确呈现。