html - 如何使用 ajax 动态更新烧瓶 Web 应用程序中的 API 数据

Question

我有一个显示加密货币价格/市值/等的网络应用程序。数据显示在引导表中。我遇到的问题是我想动态更新，比如说，使用 ajax 的加密货币的价格。我尝试使用 update.js 每 15 秒更新一次价格，价格应该更新一次。数据已获取，但 ajax 不会更新价格。

index.html 正文：

<tbody>
  {% for crypto in cryptos: %}
    <tr>
      <th scope="row">{{ crypto.cmc_rank }}</th>
      <td><span class="info">Kryptowaluta: </span><span class="bigger">{{ crypto.name }}</span></div>  | <span class="gray">{{ crypto.symbol }}</span></td>
      <td><span class="info">Kurs: </span><div id="update-zl">{{ "{:,.2f}".format(crypto.quote.PLN.price)  }}</div> <span> zł</span></td>
      <td><span class="info">Zmiana % (24h): </span><span class="td bigger">{{ "{:,.4f}".format(crypto.quote.PLN.percent_change_24h) }}</span> <span>%</span></td>
      <td><span class="info">Kapitalizacja: </span>{{ "{:,.2f}".format(crypto.quote.PLN.market_cap) }}<span> zł</span></td>
      <td><span class="info">Wolumen (24h): </span>{{ "{:,.2f}".format(crypto.quote.PLN.volume_24h) }}<span> zł</span></td>
    </tr>
  {% endfor %}
  </tbody>

更新.js

$(function(){
window.setInterval(function(){
    updateZl()
}, 15000)

function updateZl(){
$.ajax({
    url:"/update-zl",
    type: "GET",
    dataType: "json",
    success: function(data){
        $(updatezl).replaceWith(data)
    }
});

主文件

@app.route('/update-zl', methods=['GET'])
def updatezl():
    response = requests.get(url=ENDPOINT, params=parameters, headers=headers)
    data = response.json()
    crypto_data = data["data"]
    return render_template("update-zl.html", cryptos=crypto_data)

update_zl.html

{% for crypto in cryptos: %}
    <div id="update-zl">{{ "{:,.2f}".format(crypto.quote.PLN.price)  }}</div>
{% endfor %}

标签： htmljqueryajaxflask