php - 如何从 json 数据动态构建无序列表

Question

我如何修改这个动态构建下拉列表的函数，以便我可以从 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，即此处的“选择”&选项，即 in (j.options) 是表中的字段，该字段以 json 格式接收数据。我现在只有 'msg' 表字段，其中的数据将用于动态填充 'ul id="msg"'。

Answer 1

所以听起来您想将 li 元素附加到 ID 为“msg”的现有 ul，其中每个 li 的内容> 来自 jsonData 中每个条目的 .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 . (请参阅下面的“题外话”评论；工作示例使用了上述技巧之一。)

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

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

...而不是 append。

无论哪种方式，它都使用众所周知的“在数组中构建它然后加入它”的习惯用法来构建标记，这几乎总是比这样做更有效(在 JavaScript 实现中)字符串连接。 (首先构建标记，然后通过单个 DOM 操作调用应用它 [在本例中通过 jQuery] 将 绝对 比单独添加每个 li 更有效) .

如果您不关心效率(毕竟这是显示 Ajax 调用的结果，并且如果您知道只有几个 li 要附加...) ，你可以这样做:

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>");
    });
});

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

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