將Json數據傳遞給HTML模板

我是網絡開發新手，我真的不知道要問什麼問題。所以我只會解釋我想要做的事情。將Json數據傳遞給HTML模板

我正在製作一個呈現隨機引用的網站。我已經選擇了這一個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元素，以便我可以將它們放置在我想要的位置和樣式。

感謝

來源

2017-02-06 tadm123

做這樣的事情：

<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所有報價等

來源

2017-02-06 05:44:42 mehulmpt

我明白了，非常感謝。 – tadm123

由於您已經創建了HTML，您可以使用jQuery templates

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>

來源

2017-02-06 05:50:59 Satpal

我還沒有真正創建過html，只是一個通用模板。 – tadm123

所以我不需要在html模板中創建任何這樣的東西？我發現'div'和'class'的所有創建都是在模板 – tadm123

@ tadm123的實際jquery部分中完成的，您需要在tempalte中創建HTML – Satpal

將Json數據傳遞給HTML模板

回答

相關問題