如何使用 XML + AJAX + FLASK + HTML 动态更新网站？

Question

我正在尝试创建一个网站，该网站从 XML 字典中收集信息并通过 AJAX 将其发送到 Flask 以动态显示在 HTML 页面上，因此当 XML 文件更新时，更改会立即反映在网站中。理想情况下，网站每 5 分钟请求一次新数据。到目前为止，我的 Python Flask 服务器设置和 HTML 页面已准备就绪。剩下的就是 AJAX。以前从未使用过 AJAX 或 Javascript，因此需要一段时间来学习。如果有人可以查看我的脚本并帮助创建缺少的 AJAX 并建议我如何继续，那将是 excellet！

@AzyCrw4282 @Depado

App.py：烧瓶

    # Import Flask Framework Here:
from flask import Flask, flash, redirect, render_template, request, session, abort, url_for
app = Flask(__name__)

# ./Home Script:
@app.route("/")
@app.route("/index")
def index():
    return render_template('index.html')

data.XML：每 5 分钟更新一次内容

<root><coin><trader variable="GLDAG_MAPLE">Gold.co.uk</trader><metal>Silver</metal><type>Maple</type><price>£31.56</price></coin><coin><trader variable="GLDAG_BRITANNIA">Gold.co.uk</trader><metal>Silver</metal><type>Britannia</type><price>£32.4</price></coin><coin><trader variable="GLDAG_PHILHARMONIC">Gold.co.uk</trader><metal>Silver</metal><type>Philharmonic</type><price>£32.76</price></coin><coin><trader variable="BBPAG_MAPLE">Bullion By Post</trader><metal>Silver</metal><type>Maple</type><price>£27.12</price></coin><coin><trader variable="BBPAG_BRITANNIA">Bullion By Post</trader><metal>Silver</metal><type>Britannia</type><price>£23.88</price></coin><coin><trader variable="BBPAG_PHILHARMONIC">Bullion By Post</trader><metal>Silver</metal><type>Philharmonic</type><price>£26.88</price></coin></root>

index.html：每枚硬币的价格必须显示在表格中

    <table>
      <tr>
        <th>Company</th>
        <th>AG Sovereign</th>
        <th>AG Phillaharmonic</th>
        <th>AG Maple</th>
      </tr>
      <tr>
        <td>Gold.co.uk</td>
        <td>{{ GLDAG_BRITANNIA_WEB }}</td>     # price of britannia from xml here
        <td>{{ GLDAG_PHILHARMONIC_WEB }}</td>  # price of philharmonic from xml here
        <td>{{ GLDAG_MAPLE_WEB }}</td>         # price of maple from xml here
      </tr>
    </table>

Answer 1

您需要编写另一个解析 XML 文件的端点，将数据格式化为字典并提供服务。抱歉，我无法编写解析 XML 的函数。

import jsonify

@app.route('/ajax')
def ajax:
    data = parse_xml()
    return jsonify(data)

至于 html 页面，你可能想要更改 html 表格的第二行：

<tr>
  <td>Gold.co.uk</td>
  <td id="britania"></td>     # price of britannia from xml here
  <td id="philharmonic"></td>  # price of philharmonic from xml here
  <td id="maple"></td>         # price of maple from xml here
</tr>

那么这是调用flask ajax端点的脚本

$.ajax({
   url: '/ajax',
   type: 'GET',
   success: function(data){
      $("#britannia").text(data.britannia)
      $("#philharmonic").text(data.philharmonic)
      $("#maple").text(data.maple)
   }
})

这些资源可以在 AJAX 中帮助您：

1. https://code-maven.com/slides/python-programming/flask-and-ajax-jquery
2. https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xiv-ajax
3. https://flask.palletsprojects.com/en/1.1.x/patterns/jquery/