jquery - 如何在 HTML 中存储数据库项目列表？

Question

我正在使用 Django 框架开发一个项目。我正在向用户显示数据表。每行旁边都有一个“编辑”按钮。当用户单击此按钮时，该行的一个单元格中会出现带有用户名的选择框。目前，为了向此 HTML 选择元素提供选项，我将所有用户名存储在 div 元素的数据属性中，当用户单击此“编辑”按钮时，我会从此数据属性获取列表以创建选项。在我看来，这不是正确的解决方案。是否有更好的解决方案可以将用户名存储在页面中，以便我可以在需要时获取它们？ 当前代码:

<div id="usernames" data-usernames="{{users |safe}}" class="hidden"></div>
(...)

var divWithUsernames = document.getElementById("usernames");
var usernames = (divWithUsernames.getAttribute("data-usernames").replace(/&(l|g|quo)t;/g, function (a, b) {
    return {
        l: '<',
        g: '>',
        quo: '"'
    }[b];
}));
for (var i = 0; i < usernames.length; i++) {
    var val = usernames[i];
    var option = $("<option />", {value: val, text: val});
    option.appendTo($select);
}

Answer 1

我会使用 ajax 加载 json 数据并在需要时填充选择列表。

它看起来像这样:

JSON“users.json”

[{ user: "bob", age: 40 }]

jQuery:

$.get("users.json",function(data){
  $.each(data,function(i,v){
     $("<option/>").html(v.user).val(v.age).appendTo("select#usernames");
  });
});