时间戳

首页 > 解决方案 > 如何使用 javascript 将数据从 http 站点获取到 html 表中？

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

问题描述

我正在尝试从以下站点获取数据：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中？

标签： javascriptjqueryhtmlajaxget

解决方案

你的问题有几个不同的问题。我将暂时单独讨论数据采集部分，然后在最后讨论自动更新方面。

首先，您不需要为此使用 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 漏洞。UsingElement#textContent将自动转义这些名称，从而消除 XSS 的风险。

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

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

推荐阅读