时间戳

首页 > 解决方案 > 从外部 XML 实时更新网站上的文本

javascript - 从外部 XML 实时更新网站上的文本

问题描述

我是一名后端程序员，负责在网站上创建前端元素。

我只需从外部 XML 文件中获取两个数据点，然后将它们都放在站点现有的 html 中，并每隔几分钟更新一次。

xml 树很大并且有几个父元素，我只需要第一个父元素“Main-Library”中的两个子元素

这是xml的样子。我压缩了它，所以只显示前两个父母的第一个孩子：

<Root>
    <Main-Library>
            <Book>
                <Title>Book Name</Title>
                <Author>John Smith</Author>
                <Genre>Fiction</Genre>
                <Loaned>2020-09-03 13:13:48</Loaned>
                <Price>-13.30</Price>
            </Book>
            .
            .
            .
    </Main-Library>
    <Second-Library>
            <Book>
                <Title>Book Name</Title>
                <Author>John Smith</Author>
                <Genre>Fiction</Genre>
                <Loaned>2020-09-03 13:13:48</Loaned>
                <Price>-13.30</Price>
            </Book>
            .
            .
            .
    </Second-Library>
</Root>

我需要从第一个父元素 Main-Library 中获取 Loaned 和 Price 并将它们放在以下 html 中：

<p class="feed">
<span class="feed-text-large">Status: </span>
<span class="price">$35.98</span>
<span class="timestamp">Loaned at 13:13 on September 03, 2020</span>
</p>

价格和日期来自 XML，并随着 xml 的变化而刷新。

任何帮助我开始这方面的工作将不胜感激。谢谢！

标签： javascripthtmlajaxxml

解决方案

首先 - 可以使用 JSON 吗？如果是，请尝试并显示数据在 JSON 中的外观。

要做的步骤：

  1. 创建一个将检索数据的函数
function getData() {
  return fetch(theUrl).then(response => response.text())
}
  1. 创建一个解析数据的函数
function parseData(str) {
  const data = (new window.DOMParser()).parseFromString(str, 'text/xml')
  // never did anything with XML so this might be wrong
  // that's why JSON would be A LOT EASIER
  // this should get the first Book
  const Book = data.querySelector('Root Main-Library Book')
  const price = Book.querySelector('Price').innerHTML
  const loaned = Book.querySelector('Loaned').innerHTML
  return { price, loaned }
}
  1. 打印数据
function printData(data) {
  const priceTarget = document.querySelector('.price')
  const loanedTarget = document.querySelector('.timestamp')
  priceTarget.innerHTML = data.price
  loanedTarget = data.loaned
}
  1. 创建一个将定期运行的函数
function update() {
  getData().then(parseData).then(printData)
}
  1. 运行一次函数并设置时间间隔
const minutes = 5
update()
setInterval(update, minutes * 60 * 1000) // interval in ms, so 60*1000 gets us a minute

我不能 100% 确定它是否会起作用 - 我主要担心的是parseData()因为我从未在 JavaScript 中使用 XML 做过任何事情。

编辑：该代码将从第一个 Book 元素中读取数据。如果要列出所有书籍，则代码必须不同。告诉我，如果没有人比我更快，我会在大约 8 小时内回复您。晚安

推荐阅读