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

Flask:在jQuery ajax$.post调用之后呈现页面,jquery,ajax,flask,Jquery,Ajax,Flask,我使用jQuery$.post()将表单中的数据发送到flask函数。该函数对数据执行一些长时间运行的计算。在本例中,我不想返回一些HTML,而是呈现一个新模板。当我用jQuery/AJAX调用函数时,我该怎么做 表格: <form id='myform'> <input type='text'> some input... <input type='button' value='send form' id='mybutton'> </f

我使用jQuery$.post()将表单中的数据发送到flask函数。该函数对数据执行一些长时间运行的计算。在本例中,我不想返回一些HTML,而是呈现一个新模板。当我用jQuery/AJAX调用函数时,我该怎么做

表格:

<form id='myform'>
    <input type='text'> some input...
    <input type='button' value='send form' id='mybutton'>
</form>
在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?
<div id='result'>
    {{ result }}
</div>

我不想发回重定向URL和JSON,而是实际呈现一个模板。

如果呈现的模板只是一段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);
    });
});
这要求您的烧瓶模板如下所示:

@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?
<div id='result'>
    {{ result }}
</div>

{{result}}
它可以更大,但我们将其插入页面中,因此没有侧栏、菜单导航或html/正文标记,只是一个简单的html片段


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

尝试了许多方法后:

我认为将数据从长期运行的服务器端计算发送到新页面的最佳方法是使用某种服务器端存储。这样,即使浏览器关闭或用户离开网站,一切都能正常工作


我选择redis,因为它非常简单和快速。

那会有用的。问题是:“结果”是巨大而复杂的。很容易将其放在带有模板的表中。但是在Python/flask函数中编译长HTML输出并不好……更一般:您是否知道保存AJAX请求后生成的(大量)数据并从下一个请求(即$.post回调中的一个简单window.location.replace())访问数据的最佳方法,您可以让它计算/生成数据,将其保存在本地(服务器端,到memcached或redis等临时存储,甚至磁盘),并使用特定参数(计算的ID或类似参数)重定向到另一个页面,然后将结果显示为普通网页。然而,通过AJAX调用发送大量数据并没有什么错——无论出于何种目的,它的工作原理都与“普通”HTTP请求相同。我考虑过redis,我想我会选择它。根据交通量,计算实际可能需要一些时间。。。因此,无论如何,在服务器端存储并再次访问它会更安全。