logo标签列表

如何使用JavaScript从HTTP网站获取数据并将其放入HTML表格中？

javascriptjqueryhtmlajaxget
3
我正在尝试从以下网站获取数据：https://stryk.herokuapp.com/tipset。 正如您所看到的，该网站似乎包含一个对象列表。 我想做的是将{}中的每个对象分别作为单独的列放在一行中（总共6列，一个用于gameNumber，一个用于teams和3个用于按以下顺序排列的结果1 X 2，其中绿色复选标记表示该游戏的结果）。 当原始网站上的结果更新时，表格应实时更新。
我的主要问题是如何以可管理的格式从网站获取数据？ 我已尝试使用jQuery $.get()方法，但可能我没有正确应用它？ 这是我的当前javascript代码，我将obj var设置为测试列表，因此我知道“table-building”代码是否有效。 提示仅用于查看我正在获取的数据类型（似乎是[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部分，需要在不改变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中呢？

1个回答
2

你的问题涉及到几个不同的问题。我先单独讨论数据采集部分，然后在最后讨论自动更新方面的问题。

首先，你不需要使用jQuery来完成这个任务。你可以使用JavaScript的基于Promise的fetch功能来检索页面的内容，将其解析为JSON对象，并异步地格式化结果数组中的值。你可以像下面这样做：

```javascript fetch('your_url_here') .then(response => response.json()) .then(data => { // manipulate data here }); ```

注意，这里的fetch方法返回一个Promise对象，它代表了异步操作的最终完成状态。当获取到响应时，我们将其转换为JSON格式，并在第二个then回调函数中处理数据。

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长轮询或WebSockets以实现数据的实时更新。这两者都是专为动态数据检索而构建的，而$.getJSON和fetch则不是。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接