將Json數據傳遞給HTML模板

Question

我是網絡開發的新手，老實說，我甚至不知道要問什么問題。 所以我只想解釋一下我想做什么。

我正在建立一個隨機引用的網站。 我已經為此選擇了一個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元素，這樣我就可以將它們放在我想要的地方並設置樣式。

謝謝

Answer 1

做這樣的事情：

<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等設置所有引號的樣式。

Answer 2

由於您已經創建了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>

將Json數據傳遞給HTML模板

問題描述

2 個解決方案

解決方案1
2 已采納 2017-02-06 05:44:42

解決方案2
1 2017-02-06 05:50:59

將Json數據傳遞給HTML模板

問題描述

2 個解決方案

解決方案1 2 已采納 2017-02-06 05:44:42

解決方案2 1 2017-02-06 05:50:59

解決方案1
2 已采納 2017-02-06 05:44:42

解決方案2
1 2017-02-06 05:50:59