个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:45:00 25 4
gpt4 key购买 nike

我正在尝试从以下站点获取数据:https://stryk.herokuapp.com/tipset可以看出，该站点似乎包含一个对象列表。我想要做的是将 {} 中的每个对象作为单独的列排成一行(总共 6 列，一列用于游戏编号，一列用于团队，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 部分除了添加script 标签外，我不允许更改任何内容，它们只是添加在这里以供引用。

<!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 中？

最佳答案

您的问题中有几个不同的问题。数据采集​​部分暂且不谈，最后再讨论自动更新方面。

首先，您不需要为此使用 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 长轮询或 WebSockets 以启用数据的实时更新。这两个都是专为动态数据检索而构建的，而 $.getJSON和 fetch不是。

关于javascript - 如何使用 javascript 从 http 站点获取数据到 html 表中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57114597/

25 4 0
文章推荐： html - 使用两个图像作为表单的提交
文章推荐： c++ - 在 C++ 中确定对象是否动态分配
文章推荐： 整理列上的 CSS 分隔符
文章推荐： C++ 表示我的最高着色器模型是 3
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com