創建數據驅動的html網頁

目前我使用jquery從mysql數據庫獲取數據，但我想知道如何根據收到的數據爲我的網頁創建內容。例如，如果我返回一個JSON對象，如{「options」：3}，那麼我想知道如何在HTML中相應地響應以創建4個列表項。創建數據驅動的html網頁

for (i = 0; i < 3; i++){ 
    $('ul#optionsList').append('<li><a href="javascript:void(loadRand());">1.</a>   </li>'); 
     }

jQuery Mobile的ListView控件

<ul id="optionsList" data-role="listview" data-theme="g"> 
     </ul>

預先感謝您。

來源

2012-07-22 Apollo

你有很多的可能性如何創建和修改DOM元素，這裏是jsFiddle例如用於填充無序列表

有關創建新元素see

併爲你的頁面的更好的建築設計，你可能會考慮更多信息以使用庫如Backbone.js（與全面的初學者教程here）

來源

2012-07-22 21:51:01

+1 OP，確保您沒有通過JSON對象傳輸任何敏感信息。更好的解決方案IMO將使用PHP。 [看到這個問題]（http://stackoverflow.com/questions/2256310/directly-accessing-server-database-via-ajax-without-php-or-some-other-intermedi） – Alen 2012-07-22 21:57:44

@ cek-cek你的JSFiddle前是偉大的，但我使用jQuery Mobile和我的ListView的樣式消失，當我嘗試追加使用您的代碼...我已經使用我正在使用的代碼編輯我的問題上面。 – Apollo 2012-07-22 22:31:07

插入新的列表項後，您必須調用'$（'ul＃optionsList'）。listview（'refresh'）;'應用正確的jQuery項目樣式。這裏是jsFiddle：http://jsfiddle.net/xLmdw/ – 2012-07-22 22:56:10

如果您需要與您的數據構建一個巨大的html，請考慮使用模板。 handlerbars.js是一個非常好的選擇。 http://handlebarsjs.com/

來源

2016-08-02 11:35:01

創建數據驅動的html網頁

回答

相關問題