将Json数据传递给HTML模板

时间:2017-02-06 05:40:40

标签: jquery html json

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

我正在创建一个呈现随机引用的网站。我已经为此选择了一个API:

Complexity is the enemy of reliability.

— Kyle Matthew Hansen

这给了我:

a[0].content

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

所以,我猜我想要访问HTML中的a[0].titleval query = "(SELECT * FROM stg.mapping_chunk_stg WHERE mapping_status = 1)" sqlContext.read.format("jdbc").options( Map( "url" -> "jdbc:jtds:sqlserver://abc/Property_Content", "user" -> "user", "driver" -> "net.sourceforge.jtds.jdbc.Driver", "password" -> "pwd", "dbtable" -> query, /*"stg.mapping_chunk_stg"*/ ) ).load() df.show() 元素,这样我就可以将它们放在我想要的位置并设置样式。

由于

2 个答案:

答案 0 :(得分:2)

做这样的事情:

<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等设置所有引号的样式。

答案 1 :(得分:1)

由于您已经创建了HTML,因此可以使用jQuery templates

&#13;
&#13;
var item = {
  content: "Complexity is the enemy of reliability.",
  title: 'Kyle Matthew Hansen'
};
$("#myTemplate").tmpl(item).appendTo(".container");
&#13;
.content {
  color: green
}
.title {
  color: blue
}
&#13;
<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>
&#13;
&#13;
&#13;