從數據庫中設置的div在HTML模板與數據

比方說，我有類似這樣從數據庫中設置的div在HTML模板與數據

<template id="template"> 
    <div class="fname"></div> 
    <div class="lname"></div> 
</template>

我使用這個jQuery/JavaScript代碼

var bodyDiv = document.getElementById('body'); 

for (var i = 0; i < 5; i++) { 
    var tmpl = document.getElementById('template').content.cloneNode(true); 
    bodyDiv.appendChild(tmpl); 
}

顯示此模板的多個版本的HTML模板

但是，很顯然，複製/粘貼的模板都是相同的，除了空的div以外，其中沒有任何內容。有沒有辦法使用Ajax或從數據庫中獲取數據並將其加載到for循環中的div中？我想是這樣的：

for (var i = 0; i < 5; i++) { 
     var tmpl = document.getElementById('template').content.cloneNode(true); 
     // pseudo code 
     tmpl.($'.fname') = (SELECT fname FROM users WHERE id = i); 
     tmpl.($'.lname') = (SELECT lname FROM users WHERE id = i); 
     bodyDiv.appendChild(tmpl); 
}

我有一個模板，或者從一個JavaScript文件的經驗非常少，用AJAX沒有經驗訪問數據庫。

最終結果應該是屏幕上的5個模板，每個模板都包含某些數據庫中表用戶的名和姓。

來源

2014-04-09 Senju

1）通過客戶端暴露SQL語句肯定意味着你的數據庫將被黑客入侵。 2）查看backbone.js + underscore.js進行數據庫通信和模板。 –

你會想要閱讀 - https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started –

如果您使用的是服務器端腳本，則可以使用$.ajax()來提取數據。 Documentation

那麼你的代碼將類似這樣的事情：

$.ajax({ 
    url: yourServerSideScriptPage, 
    dataType: json //optional, but json is easy to parse 
}).done(function(data){ 
    $(".fname").append(data.fname); 
    $(".lname").append(data.lname); 
});

然後添加你的SQL語句的功能在服務器端這使他們更好的保護。

這只是一個非常快速和骯髒的例子，但您應該能夠根據您的具體需求進行調整。

來源

2014-04-09 18:27:52

從數據庫中設置的div在HTML模板與數據

回答

相關問題