Django：无需表单或模型从HTML列表获取数据

这个问题我熟！表单默认只会提交带name属性的表单控件（比如<input>、<select>这类），<li>属于普通DOM元素，根本不会被表单自动打包提交，所以你在后端拿不到数据是完全正常的。给你两个实用的解决方案，都是通过前端把列表内容转成表单能识别的格式：

方案一：用单个隐藏Input存储所有列表项（适合统一处理场景） #

这个方法会把所有<li>的内容合并成一个字符串，存到隐藏的<input>里，提交后后端再拆分还原。

修改后的HTML代码 #

<form action="{% url 'index' %}" method="POST" id="myForm">
  {% csrf_token %}
  <ul id="myList">
    <li id="myId1">First Item</li>
    <li id="myId2">Second Item</li>
  </ul>
  <!-- 新增隐藏input，用来存储列表内容 -->
  <input type="hidden" name="list_items" id="listItemsInput">
  <button type="submit">Submit</button>
</form>

添加JavaScript（表单提交前收集数据） #

// 监听表单提交事件
document.getElementById('myForm').addEventListener('submit', function(e) {
  // 获取所有<li>元素
  const listItems = document.querySelectorAll('#myList li');
  // 提取每个<li>的文本内容，转成数组
  const itemTexts = Array.from(listItems).map(item => item.textContent.trim());
  // 把数组转成逗号分隔的字符串（也可以用JSON格式，更适合复杂内容）
  document.getElementById('listItemsInput').value = itemTexts.join(',');
});

Django视图处理代码 #

def index(request):
    if request.method == 'POST':
        # 获取提交的字符串，拆分回数组
        list_items = request.POST.get('list_items', '').split(',')
        # 如果用JSON格式存储，就换成下面的代码：
        # import json
        # list_items = json.loads(request.POST.get('list_items', '[]'))
        
        print(list_items)  # 输出: ['First Item', 'Second Item']
    return render(request, "test.html", {})

方案二：每个列表项对应一个隐藏Input（适合单独识别场景） #

如果需要区分每个列表项的ID或者单独处理每一项，可以给每个<li>生成对应的隐藏Input，用数组格式的name让Django自动识别为列表。

修改后的HTML代码 #

<form action="{% url 'index' %}" method="POST" id="myForm">
  {% csrf_token %}
  <ul id="myList">
    <li id="myId1">First Item</li>
    <li id="myId2">Second Item</li>
  </ul>
  <!-- 用来存放动态生成的隐藏Input -->
  <div id="hiddenInputs"></div>
  <button type="submit">Submit</button>
</form>

添加JavaScript（动态生成隐藏Input） #

document.getElementById('myForm').addEventListener('submit', function(e) {
  const listItems = document.querySelectorAll('#myList li');
  const inputContainer = document.getElementById('hiddenInputs');
  
  // 先清空旧的隐藏Input，避免重复提交
  inputContainer.innerHTML = '';
  
  listItems.forEach((item) => {
    // 创建隐藏Input，name用数组格式`list_items[]`
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'list_items[]';
    input.value = item.textContent.trim();
    
    // 如果需要传递<li>的ID，可以再加一个Input：
    // const idInput = document.createElement('input');
    // idInput.type = 'hidden';
    // idInput.name = 'list_ids[]';
    // idInput.value = item.id;
    
    inputContainer.appendChild(input);
  });
});

Django视图处理代码 #

def index(request):
    if request.method == 'POST':
        // 直接用getlist获取数组格式的数据
        list_items = request.POST.getlist('list_items[]')
        // 如果传递了ID，就用request.POST.getlist('list_ids[]')获取
        
        print(list_items)  # 输出: ['First Item', 'Second Item']
    return render(request, "test.html", {})

两种方案都支持动态添加的列表项，因为JS是在表单提交前实时收集数据的。如果你的列表内容有特殊字符，优先用JSON格式存储（方案一里的注释代码），避免拆分出错。

内容的提问来源于stack exchange，提问作者Clay Records