如何使用 javascript 将数据从 http 站点获取到 html 表中？答案

【问题标题】：How to get data from http site into a html table using javascript?如何使用 javascript 将数据从 http 站点获取到 html 表中？
【发布时间】：2019-07-19 14:30:47
【问题描述】：

我正在尝试从以下站点获取数据：https://stryk.herokuapp.com/tipset 可以看出，该站点似乎包含一个对象列表。我想要做的是将 {} 中的每个对象连续作为单独的列（总共 6 列，一列用于 gameNumber，一列用于团队，3 用于结果，按以下顺序 1 X 2 带有绿色复选标记）那场比赛的结果是）。当结果在原始网站上更新时，表格应该会实时更新。

我的主要问题是如何以可管理的格式从网站获取数据？

我尝试使用 jQuery $.get() 方法，但也许我没有正确应用它？这是我当前的 javascript 代码，我将 obj var 设置为测试列表，所以我知道“建表”代码有效。只是添加警报以查看我正在获取什么类型的数据（似乎是一个列表：[object, Object], [object, Object] .... 等等，我不太明白）


  $.get("https://stryk.herokuapp.com/tipset", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });

var obj = $.get("https://stryk.herokuapp.com/tipset", function(data){
var globalCounter = 0;
var tbody = document.getElementById('tbody');
for (var i = 0; i < Object.keys(obj).length; i++) {
    var tr = "<tr>";

    tr += "<td>" + obj[i].gameNumber + "</td>" + "<td>" + obj[i].teams.toString() + "</td>" + "<td>" + obj[i].outcome + "</td></tr>";
    table.innerHTML += tr;
}
})

html部分，obs，我不允许在html和css部分更改任何东西，除了添加脚本标签，它们只是在这里添加以供参考。

<!DOCTYPE html>

<html>

<head>
    <title>JS - Examination</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="assets/css/index.css" />
    <link rel="shortcut icon" href="assets/img/fotboll.png" type="image/png">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script scr="assets/js/index.js" type="module"></script>
</head>

<body>

    <header>
        <h1>FOTBADSKOLLEN</h1>
        <p class="smallLogo">FÖR DIG SOM SPARKAR BOLL</p>
    </header>

    <nav>
        <ul>
            <li id="active"><a href="#">stryket</a></li>
            <li><a href="#">bänken</a></li>
            <li><a href="#">korvmojjen</a></li>
            <li><a href="#">lagen</a></li>
        </ul>
    </nav>


    <main>
        <h1>Stryk<img id="fotball" src="assets/img/fotboll.png"> tipset</h1>
        <p>-först till 13rätt vinner!</p>
        <hr />

        <table id="table">
            <tr>
                <th>Rad:</th>
                <th>Lag:</th>
                <th>1</th>
                <th>X</th>
                <th>2</th>
            </tr>
        </table>
    </main>

    <footer class="text-center">
        <nav>
            <ul>
                <li><a href="#">Kontakta oss</a></li>
                <li><a href="#">Om oss</a></li>
                <li><a href="#">Rapportera fel</a></li>
            </ul>
        </nav>
        <h2>TIPSA OSS</h2>
        <p>
            Vi är ständigt på jakt efter de senaste skvallren vad gäller fotbollsproffs och deras partners <br />
            Har du ett tips eller kanske filmat något själv? <br />
            Hör av dig via denna länken: <a href="#"> TIPSA OSS</a>
        </p>
        <br />
        <hr />
        <br />
        <p>
            Din väg från bänken rakt in i målet!<br>
            &copy; Fotbadskollen
            <script type="text/javascript">
                document.write(new Date().getFullYear());
            </script>
        </p>
    </footer>
</body>

</html>

Css 部分：可能不相关？...


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

@font-face {
    font-family: FjallaOne-Regular;
    src: url("../fonts/FjallaOne-Regular.otf") format("opentype");
}

html {
    background: url('../img/bg.jpg') #fff no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family: Verdana;
    color: #000;
}

header {
    height: 100px;
    color: #000;
    text-align: center;
}

header p {
    font-size: 4em;
    width: 960px;
    margin: 0 auto;
}

.smallLogo {
    font-size: 2em;
    font-style: italic;
}

nav {
    margin-top: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    height: 70px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
}

ul {
    padding-top: 25px;
    list-style-type: none;
    text-align: center;
}

li {
    display: inline-block;
    margin-left: 40px;
}

a {
    color: #000;
    text-decoration: none;
}

#active a {
    color: red;
}

a:hover {
    text-decoration: underline;
}

main {
    background-color: rgba(255, 255, 255, 0.9);
    width: 960px;
    margin: 40px auto 0 auto;
    padding: 30px;
    text-align: center;
}

main table {
    margin: 0 auto;
    width: 92%;
    text-align: center;
}

main table tr td:first-child, main table tr th:first-child {
    text-align: left;
}

#fotball {
    opacity: 1;
}

.checkmark {
    display: inline-block;
    width: 22px;
    height: 22px;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.stem {
    position: absolute;
    width: 5px;
    height: 11px;
    background-color: green;
    left: 11px;
    top: 6px;
}

.kick {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: green;
    left: 8px;
    top: 12px;
}

main hr {
    margin: 40px;
}

main p {
    padding-left: 250px;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

footer {
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 25px;
}

footer nav {
    background-color: transparent;
}

footer hr {
    max-width: 960px;
}

table {
    text-align: left;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 0;
    border-top: 1px solid #999999;
}

.red {
    color: red;
}

h1, h2, nav, header {
    font-family: FjallaOne-Regular;
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 1.5em;
}

footer h2 {
    color: red;
}

我只是没有在我的 html 站点表上获得任何更新，我希望它能够在源网页上的更新时实时更新。我还想为结果打一个绿色复选标记，而不是使用以下代码的数字：

<span class="checkmark">
            <div class="stem"></div>
            <div class="kick"></div>
        </span>

但是这应该如何包含在 javascript 中呢？

【问题讨论】：

标签： javascript jquery html ajax get

【解决方案1】：

您的问题中有几个不同的问题。数据采集部分我先单独讲，最后再讨论自动更新方面。

首先，您不需要为此使用 jQuery。您可以使用 JavaScript 基于 Promise 的 fetch 功能来检索页面的内容，将其解析为 JSON 对象，并格式化结果数组中的值，所有这些都是异步的。你可以这样做：

const table = document.getElementById("tipset");
const td = document.createElement("td");
const tr = document.createElement("tr");

// Define the order in which the columns appear in the table.
const cols = ["gameNumber", "teams"];
const outcomes = ["1", "X", "2"];

// Fetch the contents of the page
fetch("https://stryk.herokuapp.com/tipset")
  .then(r => r.json()) /* Convert the contents to JSON */
  .then(e => {
    // For each of the items in the array...
    e.forEach(i => {
      // Clone the reference tr object defined at the top.
      let row = tr.cloneNode();
      // For each of the predefined columns...
      cols.forEach(l => {
        // Clone the reference td object defined at the top.
        let cell = td.cloneNode();
        // Set the contents to the value in the object, or "-" if missing.
        cell.textContent = i[l] || "-";
        // Append the cell to the row.
        row.appendChild(cell);
      });
      // For each of the outcomes defined near the top...
      outcomes.forEach(o => {
        // Clone the reference td object defined at the top.
        let cell = td.cloneNode();
        // If the outcome of the current object is equal to the current outcome in the array...
        if (i.outcome === o) {
          // Place a green checkmark in the array.
          cell.textContent = "\u2714\uFE0F";
        }
        // Append the outcome cell to the row.
        row.appendChild(cell);
      });
      // Append the completed row to the table.
      table.appendChild(row);
    });
  });

<table id="tipset">
  <tr>
    <th>gameNumber</th>
    <th>teams</th>
    <th>1</th>
    <th>X</th>
    <th>2</th>
  </tr>
</table>

在这里使用cloneNode 而不是仅仅创建一个HTML 字符串很重要。为什么？因为您不一定控制团队的名称。如果一个足球队决定将自己命名为<script>alert(1)</script>，并且您直接将该名称添加到您的页面，那么您就有了典型的 XSS 漏洞。使用Element#textContent 会自动转义这些名称，从而消除XSS 的风险。

现在，上面的代码可以工作，但它不会自动更新。这样做的原因是你真的不应该在每次数据更新时都重新创建一个表。重建表的唯一替代方法是发出完整请求并比较对象的内容以查看是否有任何更改。这种策略不仅会给第三方数据提供者带来压力（因为每个客户都在一次又一次地请求数据，无论您想更新多少次），而且付出的努力多于其价值。

我建议查看 HTTP Long Polling 或 WebSockets 以启用数据的实时更新。这两个都是专门为动态数据检索而构建的，而 $.getJSON 和 fetch 不是。

【讨论】：