[英]Passing Json data to HTML template
我是网络开发的新手,老实说,我甚至不知道要问什么问题。 所以我只想解释一下我想做什么。
我正在建立一个随机引用的网站。 我已经为此选择了一个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].content
和a[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等设置所有引号的样式。
由于您已经创建了HTML,因此可以使用jQuery模板
var item = { content: "Complexity is the enemy of reliability.", title: 'Kyle Matthew Hansen' }; $("#myTemplate").tmpl(item).appendTo(".container");
.content { color: green } .title { color: blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <script id="myTemplate" type="text/x-jquery-tmpl"> <div> <div class="content">${content}</div> <span class="title">${title}</span> </div> </script> <div class='container'> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.