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

时间:2013-06-18 14:24:49

标签: 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'>
</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?
    });
});

在烧瓶中,相应的功能如下所示:

@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?

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

2 个答案:

答案 0 :(得分:4)

如果您呈现的模板只是一段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页面,则会出现问题,因为它无法在现有页面内正确呈现。

答案 1 :(得分:1)

尝试了很多方法后:

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

我选择redis,因为它简单而快速。