插入html到模板使用AJAX与Python烧瓶

我想做的事情，我认为很简单，但我是一个烧瓶新手，所以我希望有人能指出我在正确的方向。插入html到模板使用AJAX与Python烧瓶

我正在为用户管理他们的股票投资组合的Python Flask应用程序。

我需要从雅虎财务服务器获取共享信息并将其呈现在页面上，但是获取此数据可能需要几秒钟的时间，直到收到GET请求后页面才会变为空白。渲染。

我想加载没有共享数据的页面，然后一旦收到数据就会生成一些HTML并将此HTML插入到我的页面中。

我写了获取所有数据，并将其传递到Jinja2的模板

@app.route('/sharedata') 
def sharedata(): 
    js = share_data.getalljsonshares(current_user.username) 
    io = StringIO() 
    data= json.dumps(js, io) 

    return render_template('sharedata.html', data=share_data.getalljsonshares(current_user.username))

然后我用下面的代码在sharedata.html呈现HTML

路线

{% if data %} 

    <h2>You own the following shares</h2> 

    {% for share in data %} 

     <li> 
      Ticker: {{share.symbol}}<br> 
      Name: {{share.name}}<br> 
      Quantity: {{share.quantity}} <br> 
      Price: {{share['price']}} 
     </li> 

    {% endfor %} 

     {% endif %}

导致以下页面渲染

You own the following shares 

Ticker: AAPL 
Name: APPLE inc 
Quantity: 1 
Price: 102.71

我想知道我怎么能自动插入这个HTML到我的模板，我相信，我需要使用AJAX和JQuery，但我在GET请求完成后，我可以直接将HTML插入到我的页面，这在一定程度上是一种损失。谢谢

来源

2016-01-06 Lucas Amos

创建div标签作为主HTML /模板容器和使用jquery应用$（ ''）负载（“ '）载入事件 –

你必须使用JavaScript。用jQuery这是一个简单的任务。

在你main.html你必须写类似的东西：

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
</head> 
<body> 
<div id="result"></div> 

<script> 
    $.on('ready', function() { 
    $('#result').load('/sharedata') 
    }) 
</script> 
</body>

来源

2016-01-06 14:21:13 Daniel

非常感谢！我知道这是微不足道的，但我需要一个亲！ –

@Daniel我得到错误'未捕获的TypeError：$ .on不是函数'我正在使用jquery版本3.1.1 – mp252

插入html到模板使用AJAX与Python烧瓶

回答

相关问题