Flask：在jQuery ajax $ .post调用后渲染一个页面 [英] Flask: render a page after jQuery ajax $.post call

问题描述

我使用jQuery $ .post（）将表单中的数据发送到一个容器函数。这个函数做了一些长时间运行计算的数据。在这种情况下，我不想发回一些HTML，而是渲染一个新的模板。当我使用jQuery / AJAX调用函数时，我该如何做到这一点？

表单：

 < form id ='myform'> 
< input type ='text'>一些输入... 
< input type ='button'value ='发送表单'id ='mybutton'> 
< / form> 
  

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

$ $ $ $ $ $ $ $（＃mybutton）。click（function（）{
//获取表单中的数据
$ exampledata ='foo'
$ .post（/ some / flask / function，{'data'：$ exampledata}，function（response）{
我可以在这里渲染一个新的模板，函数？
}）;
}）;

在flask中，相应的函数如下所示：



$ long








$ request.form
data = form ['data']

result = runTheLongCalculation（data）
这不起作用 - >
返回render_template（'result.html'，r = result）
如何在jQuery / AJAX调用之后呈现新模板？

我不想发回重定向网址和JSON，但实际上会呈现模板。如果你渲染的模板只是一段HTML，你可以返回它，就像你在Flask代码中显示的那样在浏览器中：

  $。（＃mybutton）。click（function（）{
 / /获取数据的形式
 $ exampledata ='foo'
 $ .post（/ some / flask / function，{'data'：$ exampledata}，function（response）{
 var myDiv = $（'＃resultarea'）; //你要插入模板的地方
 myDiv.html（response）; 
}）; 
}）; 
  

这个Flask模板看起来像这样：

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

它可以更大，但是我们在页面内插入它，所以没有侧边栏，菜单导航或html / body标签，只是一个简单的HTML。

如果您使用Flask函数返回完整的HTML页面，则会出现问题，因为它将无法正确显示在现有的页面内。

I send data from a form with jQuery $.post() to a flask function. The function does some long running calculation the data. In this case, I don't want to send back some HTML but rather render a new template. How can I do this when I call the function with jQuery/AJAX?

The form:

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

Calculation on form input takes some time, so I send it with 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?
    });
});

In flask, the corresponding function looks like this:

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

I don't want to send back a redirect URL and JSON, but actually render a template.

解决方案

If the template you render is simply a piece of HTML, you can return it like you have shown in your Flask code and do the following in the browser:

$.("#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);
    });
});

This expects your Flask template to look something like this:

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

It can be bigger, but we are inserting it inside the page so no sidebars, menu navigation or html/body tags, just a simple piece of HTML.

The problem arises if you send back a fully fledged HTML page with your Flask function, as it will not be rendered correctly inside the existing page.

这篇关于Flask：在jQuery ajax $ .post调用后渲染一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！