创建数据驱动的 html 网页答案

【问题标题】：Creating a data-driven html webpage创建数据驱动的 html 网页
【发布时间】：2012-07-22 21:36:45
【问题描述】：

目前我正在使用 jquery 从 mysql 数据库中获取数据，但我想知道如何根据收到的数据为我的网页创建内容。例如，如果我返回一个像 { "options" : 3 } 这样的 JSON 对象，那么我想知道如何在 HTML 中做出相应的响应来创建 4 个列表项。

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

jQuery Mobile 列表视图

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

提前谢谢你。

【问题讨论】：

【解决方案1】：

你有很多可能如何创建和修改 DOM 元素，这里是 jsFiddle 填充无序列表的示例

有关创建新元素的更多信息see

为了更好的页面架构，您可以考虑使用诸如Backbone.js 之类的库（带有综合初学者教程here）

【讨论】：

+1 OP，确保您没有通过 JSON 对象传输任何敏感信息。更好的解决方案 IMO 是使用 PHP。 See this question
@cek-cek 您的 JSFiddle ex 很棒，但是我使用的是 jQuery Mobile，当我尝试使用您的代码追加时，我的 ListView 的样式消失了...我已经编辑了我上面的问题我正在使用的代码。
插入新列表项后，您必须调用$('ul#optionsList').listview('refresh'); 以应用正确的 jQuery 项样式。这里是 jsFiddle：jsfiddle.net/xLmdw

【解决方案2】：

如果您需要使用您的数据构建一个巨大的 html，请考虑使用模板。 handlerbars.js 是一个非常好的选择。 http://handlebarsjs.com/

【讨论】：