从 URL 源创建 html 表答案

【问题标题】：Create html table from URL source从 URL 源创建 html 表
【发布时间】：2020-03-22 20:38:49
【问题描述】：

这可能是最简单的代码，但我对此很陌生，需要一些帮助。我正在尝试通过 OpenHab2.0 为我的智能家居构建仪表板。对于这个仪表板，我想要一个小部件来显示我的电车站接下来的 5 个班次。我的表的布局如下：

table format 我试图插入的数据是通过这个 URL 找到的： https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245。

"0":{"line":"5","direction":"Am Butzweilerhof","time":"Sofort"},
"1":{"line":"5","direction":"Heumarkt","time":"6 Min"},
"2":{"line":"13","direction":"Sülzgürtel","time":"8 Min"},
"3":{"line":"13","direction":"Holweide","time":"8 Min"},
"4":{"line":"E","direction":"Melatengürtel","time":"10 Min"},
"5":{"line":"141","direction":"Vogelsang","time":"13 Min"},

“0”到“5”是当前和接下来五个出发的标识符。但是，我不知道如何将线路、方向和时间输入到表格中。

另外，我希望表格每分钟自动更新一次。有没有办法在 HTML 中进行编程？因为据我所知，这是小部件构建器接受的唯一格式。

谢谢

回答 1 PHP：

【问题讨论】：

标签： html openhab

【解决方案1】：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="table">

    </table>
    <script>
        let table = document.querySelector('.table')
        fetch(`https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245`)
            .then(res => res.json())
            .then(res => {
                for (let index = 0; index < 5; index++) {
                    table.innerHTML += `
                        <tr>
                            <td>${res[index].line}</td>
                            <td>${res[index].direction}</td>
                            <td>${res[index].time}</td>
                        </tr>
                    `
                }
            })
    </script>
</body>
</html>

理论上，此代码将拉入前五个（从 0 开始）并将它们作为行添加到表格元素中。但是，这不起作用，因为您引用的 URL 没有 Access-Control-Allow-Origin 标头 IE 被 CORS 阻止。

如果您拥有此服务器，则可以添加 CORS 支持，或要求服务器所有者添加 CORS 支持，以便通过 JavaScript 获取此信息。否则，您将不得不使用 PHP 这样的语言在 CORS 不会成为问题的语言中创建此请求服务器端。

编辑：

此代码将通过使用 PHP 来避免 CORS：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <?php

        $res = file_get_contents('https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245');
        $json = json_decode($res);

        for ($i=0; $i < 4; $i++) { 
            echo '<tr>';
            echo '<td>' . $json->$i->line . '</td>';
            echo '<td>' . $json->$i->direction . '</td>';
            echo '<td>' . $json->$i->time . '</td>';
            echo '</tr>';
        }

        ?>

    </table>
</body>
</html>

【讨论】：

很遗憾，我不是服务器的所有者......从这个链接会更好吗？ kvb.koeln/generated/?aktion=show&code=245
@msvdg 我认为其他链接的数据格式更好。你会用PHP吗？我可以编写一些可以在 PHP 服务器上运行的代码。
是的，我可以使用 PHP
可悲的是，它看起来像坏了..还是我错过了什么？虽然我无法在此处获取屏幕截图.. 请参阅我最初的评论
@msvdg 您是否将其保存为.php 文件？