从 URL 源创建 html 表

Question

It probably the most simple of codes, but I am very new to this and need some help.它可能是最简单的代码，但我对此很陌生，需要一些帮助。 I am trying to build a dashboard for my smart home via OpenHab2.0.我正在尝试通过 OpenHab2.0 为我的智能家居构建一个仪表板。 For this dashboard, I'd like to have a widget that shows me the next 5 departures from my tram stop.对于这个仪表板，我想要一个小部件，显示我的电车站接下来的 5 个发车时间。 the layout of my table is as follows:我的表的布局如下：

table format The data I am trying to insert is found via this URL: https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245 .表格格式我试图插入的数据是通过这个 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"},

the "0" to "5" are the identifiers of the current and next five departures. “0”到“5”是当前和下五个出发的标识符。 However, I don't know how to get the line, direction and time into the table.但是，我不知道如何将线路、方向和时间放入表格中。

Also, I would like that the table updates every minute automatically.另外，我希望表格每分钟自动更新一次。 Is there any way of programming this in HTML?有没有办法在 HTML 中编程？ because that's the only format the widget builder accepts as far as I know.因为据我所知，这是小部件构建器接受的唯一格式。

Thanks谢谢

Answer 1 PHP:回答 1 PHP：

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

This code will in theory pull in the first five (starting at 0) and add them as rows to the table element.理论上，这段代码将拉入前五个（从 0 开始）并将它们作为行添加到表元素中。 However, this won't work because the URL you referenced does not have the Access-Control-Allow-Origin header IE is being blocked by CORS.但是，这不起作用，因为您引用的 URL 没有Access-Control-Allow-Origin标头 IE 被 CORS 阻止。

If you own this server, you can add CORS support, or ask the server owner to add CORS support in order to fetch this information via JavaScript.如果您拥有此服务器，则可以添加 CORS 支持，或要求服务器所有者添加 CORS 支持，以便通过 JavaScript 获取此信息。 Otherwise, you will have to make this request server side in a language like PHP where CORS won't be a problem.否则，您将不得不使用像 PHP 这样的语言来创建这个请求服务器端，这样 CORS 不会成为问题。

EDIT:编辑：

This code will avoid CORS by using PHP:此代码将通过使用 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>

从 URL 源创建 html 表

问题描述

1 个解决方案

解决方案1
0 2020-03-22 20:53:35

从 URL 源创建 html 表

问题描述

1 个解决方案

解决方案1 0 2020-03-22 20:53:35

解决方案1
0 2020-03-22 20:53:35