在 html 上显示获取的数据答案

【问题标题】：showing fetched data on html在 html 上显示获取的数据
【发布时间】：2021-06-06 13:43:07
【问题描述】：

我正在尝试显示我在 html 文件中获取的数据。我希望 json 显示在我放置 HERE 的位置，但我不知道如何

<script defer>
fetch("http://localhost:8080/bot/guilds")
    .then(data => data.json())
    .then((json) => {
        document.getElementById("servers").innerHTML = json
    })
</script>
<div class="statistics">
    <div class="cards">
        <div class="card statistic" style="width: 18rem;">
            <div class="card-body">
                <p class="card-title" style="font-size: 50px !important;line-height: 15px !important;letter-spacing: -0.06em !important;font-weight: bold !important;">HERE</h1>
                <p style="font-weight: bold !important;font-size: 20px !important;">servers</p>
            </div>
        </div>

【问题讨论】：

您正在尝试将 HTML 值设置为 JSON？
您希望将 JSON 数据简单地显示为 key=value 对吗？ JSON 有多复杂？ JSON中有多少层？到目前为止，还很少有人知道其意图是什么
花一点时间在帮助中，您将了解如何将代码复制/粘贴到问题中并正确格式化

标签： php html json fetch

【解决方案1】：

我认为你需要的是 json_encode()

<script>
      var js_sample = <?php echo json_encode($php_sample)?>;
<script>

【讨论】：

我认为这根本不是 OP 所需要的。这可能会生成 JSON 内容，但无助于显示它
我的意思是，当您点击该网站时，您会得到一个数字 (2)。我希望它显示那个数字
你只需要给它一对引号然后它就是一个字符串，然后你使用innerHTML把它放在元素上。 <script> var js_sample = '<?php echo json_encode($php_sample)?>'; document.querySelector('p.card-title').innerHTML = js_sample; <script>

【解决方案2】：

您的代码几乎是正确的。唯一错误的是json 变量仍然是一个对象。您可能正在寻找 JSON.stringify() 以将其显示为字符串。

在此处查看更正后的代码。

<script defer>
fetch("http://localhost:8080/bot/guilds")
    .then(data => data.json())
    .then((json) => {
        document.getElementById("servers").innerHTML = JSON.stringify(json)
    })
</script>

【讨论】：

此外，问题的代码中没有元素 #servers - 具有 .card-title 类的段落需要匹配的 ID 属性才能让 JavaScript 找到它。
我解决了这个问题，但我仍然不知道将 json 值放在我放置 HERE 的位置

【解决方案3】：

您尝试在不存在的地方显示 json 数据，这是这里的主要问题。如果您想显示它来代替“这里”标签，请使用此选择器：

document.querySelector('p.card-title').innerHTML = json

此外，json 是一个对象，因此您需要将其更改为字符串以更好地显示：

document.querySelector('p.card-title').innerHTML = JSON.stringify(json)

应该可以的。

还有一件事，你的 p.card-title 标记用 P 标记打开并用 H1 标记关闭，也将关闭 H1 更改为 P。

【讨论】：

以及如何给 HERE 一个单独的名称？
嗯，元素可以通过 ID 或 CLASS 来识别。如果您想给它一个单独的名称，请在 p.card-title 中放置另一个标签，该标签将作为该数据的占位符，然后将其 innerHTML 设置为您的 JSON。示例：<p class="card-title" style="font-size: 50px !important;line-height: 15px !important;letter-spacing: -0.06em !important;font-weight: bold !important;"><span class="json-result">HERE</span></p>document.querySelector('span.json-result').innerHTML = JSON.stringify(json)

【解决方案4】：

感谢所有帮助的人 ^^ 我使用了一个模块（cors）并且它有效

【讨论】：

无论如何，如果它比其他任何问题都好，请提供您自己问题的答案。但这确实应该是问题的答案。这不是答案