使用AJAX和Python将html插入模板_Python_Ajax_Python 2.7_Flask

使用AJAX和Python将html插入模板

python ajax python-2.7 flask

使用AJAX和Python将html插入模板,python,ajax,python-2.7,flask,Python,Ajax,Python 2.7,Flask,我正在尝试做一些我认为很简单的事情，但是我是一个新手，所以我希望有人能给我指出正确的方向我正在为用户制作一个Python Flask应用程序来管理他们的股票投资组合我需要从yahoo finance服务器获取共享信息，并将其呈现在页面上，但是获取此数据可能需要几秒钟的时间，此时页面为空白，直到收到GET请求，页面呈现在该点我想加载没有共享数据的页面，然后在收到数据后生成一些HTML并将此HTML插入我的页面我已经编写了一个获取所有数据并将其传递给Jinja2模板的路由 @app.rou

我正在尝试做一些我认为很简单的事情，但是我是一个新手，所以我希望有人能给我指出正确的方向

我正在为用户制作一个Python Flask应用程序来管理他们的股票投资组合

我需要从yahoo finance服务器获取共享信息，并将其呈现在页面上，但是获取此数据可能需要几秒钟的时间，此时页面为空白，直到收到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 %}

我想知道如何将这个HTML自动插入到我的模板中，我确信我需要使用AJAX和JQuery，但在GET请求完成后如何直接将HTML插入到我的页面中，我有点不知所措。

谢谢

您必须使用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>


$.on（'ready'，function（）{
$（“#结果”）.load（“/sharedata”）
})

在主html/模板中创建div标记作为容器，并使用jquery apply$（''）.load（''）on load Event非常感谢！我知道这很琐碎，但我需要一个专业人士@Daniel我得到了错误

uncaughttypeerror:$。on不是函数

我使用的是jquery版本3.1.1我使用的是

$（document）.ready（function（）{…}）

而不是$。on

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