jquery - 将 Json 数据传递到 HTML 模板

标签 jquery html json

我是网络开发新手,老实说我什至不知道该问什么问题。 所以我只是解释一下我想做什么。

我正在制作一个呈现随机报价的网站。我已经为此选择了一个 API:

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

这给了我:

Complexity is the enemy of reliability.

— Kyle Matthew Hansen

现在,我在 HTML 中创建了一个通用框架来构建我的网站,我如何将这些 json 元素传递到我的 HTMl 模板中以便我可以操作它们?

所以,我猜我想访问 HTML 中的 a[0].contenta[0].title 元素,以便可以放置它们我想要它们并设计它们的位置。

谢谢

最佳答案

做这样的事情:

<body>
...
<div id="quotes">

</div>
...
</body>

还有 JS:

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  var quote = a[0].content;
  var author = a[0].title;
  var quoteHTML = $('<div class="quote"><div class="quoteBody">'+quote+'</div><div class="quoteAuthor">'+author+'</div>';
  $('#quotes').append(quoteHTML);
});

然后在 CSS 中,您可以使用 .quote、.quoteBody、.quoteAuthor 等设置所有引号的样式。

关于jquery - 将 Json 数据传递到 HTML 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42061013/

相关文章:

javascript - 文档点击隐藏菜单

javascript - IE 不记得后退按钮上的隐藏字段值

javascript - 输入视频文件时获取视频时长

json - 如何在 JSONPath 中按字符串过滤?

json - 将通知 azure 推送到 FCM 主题

javascript - 在 Internet Explorer 中运行本地 'Javascript Dependant' HTML 文件

javascript - 如何使用jquery更改选择框中呈现的选定选项

java - 使用 Java 更新 html 表单

javascript - 如何处理使用:hover and :focus for clickable top-level links?的触摸屏设备上的多级菜单

javascript - jquery 从数组中扩展一个 json 元素