gpt4 book ai didi

javascript - 我如何获取 JSON 并使用 jQuery 将其推送到 HTML 中?

转载 作者:行者123 更新时间:2023-11-29 18:20:27 25 4
gpt4 key购买 nike

我有 HTML 页面,我决定使用从 API (api.example.com) 生成的 JSON 来填充它们。

问题是我从未使用过 jQuery。使用 jQuery 提取信息然后用 JSON 数据(如姓名、消息)填充 HTML 的基础知识是什么?

我应该将 JavaScript 代码放在 HTML 页面的末尾(就在 之前)吗?

或者,有没有简单的方法?

最佳答案

真的取决于返回的 json 是什么样子。

首先使用 ajax 获取数据。

var incomingData; //Incoming Data Variable

$.ajax("http://yourURL.goes.here", {
type: "GET",
dataType: "json",
success: function(data) {
incomingData = data;
},
error: function(req, status, err) {
//console.error("Something went wrong! Status: %s (%s)", status, err);
}
});

现在您的数据将保存在 incomingData 中变量。

我将 console.log 数据,以便您可以查看它,但访问这些部分将通过 DOT 表示法完成:

incomingData.name;
incomingData.phone;

通常当你返回 JSON 时你会得到一个对象数组,所以你可能需要循环遍历。

for(var i = 0; i < incomingData.length; i++) {
console.log(incomingData[i]);
$('.yourClass').append(incomingData[i].name + '<br />');
}

以上将获取“名称”属性的值并将其附加到您的 <div class="yourclass"></div>在你的 html 中。它还将控制台记录您在控制台中迭代的对象,因此您应该能够看到它的所有属性。起初令人困惑,但却是必要的 JS 技能。 :)

至于将代码放在哪里,最佳做法是在结束 body 标记之前。确保您的代码在加载 jquery 后运行。制作一个 main.js 文件并将其包含在您的 body 结束标记之前:

<body>
...
All of your HTML
...
<script src="jquery.js"></script>
<script src="yourfile.js"></script>
</body>

关于javascript - 我如何获取 JSON 并使用 jQuery 将其推送到 HTML 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19214887/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com