插入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燒瓶

回答

相關問題