时间戳

首页 > 解决方案 > 从 URL 获取 JSON 数据并填充 HTML 文本并根据值禁用按钮

javascript - 从 URL 获取 JSON 数据并填充 HTML 文本并根据值禁用按钮

问题描述

新手在这里尝试为慈善机构获取登录页面，以使用 JSON 提取数据，并从本质上计算库存中剩余的物品数量并在 HTML 中显示，然后当库存达到 0 时禁用按钮并更改样式按钮。我获得了一个带有 JSON 数据的 URL，如下所示：

0:
    Name: "Main Campaign"
    TotalInventory: 18
    AmountRaised: 2200
    remainingInventory: 4
1:
    Name: "Main Campaign - Child 1"
    TotalInventory: 10
    AmountRaised: 1000
    remainingInventory: 0
2:
    Name: "Main Campaign - Child 2"
    TotalInventory: 5
    AmountRaised: 100
    remainingInventory: 3
3:
    Name: "Main Campaign - Child 3"
    TotalInventory: 3
    AmountRaised: 1000
    remainingInventory: 1

在着陆页上有 3 个不同的项目，每个项目都有不同的库存量。当数据库中的库存编号发生变化时，它会实时填充到 JSON URL 中，希望登陆页面能够反映这一点。

着陆页有 3 个不同的框，布局相同，如下所示：

<div class="col-md-4">
    <div class="card mb-5 light-blue">
        <div class="amount"><h4>10 left</h4></div>
             <img class="card-img-top" src="images/donation.jpg" alt="Donation">
            <div class="card-body">
              <h4>Donation 1</h4>
              <p class="card-text">Donation description goes here</p>
              <div class="d-flex justify-content-center align-items-center">
                <button type="button" class="btn btn-sm btn-outline-secondary">Donate $50</button>


            </div>
        </div>
    </div>
</div>

标签： javascriptjqueryhtmljson

解决方案

要获取您的数据，请使用fetch()或XMLHttpRequest，具体取决于您的站点需要支持的浏览器。一旦您将响应作为字符串，只需在其上运行JSON.parse()函数，您将得到 JSON 数据所代表的数组。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

之后，只需执行 DOM 操作即可更新您的站点。

推荐阅读