如何从 json 数据动态构建无序列表答案

【问题标题】：How do I build an un-ordered list dynamically from json data如何从 json 数据动态构建无序列表
【发布时间】：2010-11-28 13:00:33
【问题描述】：

如何修改这个动态构建下拉列表的函数，以便我可以从 json 数据动态构建一个无序列表。

</script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
            $.each(jsonData, function (i, j) {
                document.index.spec_list.options[i] = new Option(j.options);
       });
     });});
</script>

*spec_list* 是下拉列表的 id，即此处的“选择”和 options，即 in (j.options) 是表中以 json 形式接收数据的字段。我现在只有 'msg' 表字段，哪些数据将用于动态填充 'ul id="msg"'。

【问题讨论】：

标签： php javascript html json html-lists

【解决方案1】：

所以听起来您想将li 元素附加到ID 为“msg”的现有ul，其中每个li 的内容来自@987654326 中每个条目的.msg 属性@：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var markup;

    markup = [];
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        markup.push("<li>");
        markup.push(j.msg);
        markup.push("</li>");
    });

    jQuery('#msg').append(markup.join(""));
});

Here's a working example。（请参阅下面的“离题”评论；工作示例使用了提到的技巧之一。）

或者如果新的lis 应该替换ul 中的现有ul，请使用

jQuery('#msg').html(markup.join(""));

...而不是append。

无论哪种方式，都使用众所周知的“在数组中构建它，然后joinit”来构建标记，这几乎总是比字符串连接更有效（在 JavaScript 实现中）。（首先构建标记，然后通过单个 DOM 操作调用 [在这种情况下通过 jQuery] 应用它，肯定比单独添加每个 li 更有效）。

如果您不关心效率（毕竟这是显示 Ajax 调用的结果，并且如果您知道只有几个 lis 可以附加...），您可以这样做像这样：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var ul;

    ul = jQuery('#msg');
    // If you want to clear it first: ul.empty();
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        ul.append("<li>" + j.msg + "</li>");
    });
});

...但是如果您要处理很多项目，或者如果您在经常发生的事情中这样做，您可能最好使用 build-it-up 版本。

题外话：您的原始代码混合使用jQuery 符号和$ 符号。可能最好坚持一个或另一个，所以我选择了上面的jQuery。如果您没有使用noConflict，或者如果您正在使用noConflict 但仍然能够使用$，您可以安全地将上述内容更改为始终使用$。

【讨论】：