Django中使用request.POST.get如何获取HTML标签除value外的其他属性？

HTTP 表单提交的默认规范就是仅会发送表单元素的name和value键值对，标签的id、文本内容、类名等其他属性不会被默认携带到请求中，这不是Django框架的限制，是HTTP协议的标准逻辑。

要获取这些额外属性，需要你在前端主动把需要的属性值放到提交的参数里，后端才能通过request.POST拿到，常见实现方案如下：

方案1：隐藏表单域传递（最通用，兼容同步表单提交场景） #

这是兼容性最高的方案，不需要修改原有表单的提交逻辑，只需新增隐藏的input元素存储额外属性值即可：

1. HTML部分新增隐藏域，同时给需要取值的元素添加自定义属性存储需要传输的内容：

<form method="post" action="/your-submit-url/">
  {% csrf_token %}
  <!-- 原有业务表单元素示例：下拉选择框 -->
  <select id="city_select" name="city_code">
    <option value="110000" data-text="北京市" data-option-id="opt_001">北京市</option>
    <option value="310000" data-text="上海市" data-option-id="opt_002">上海市</option>
  </select>
  <!-- 新增隐藏域存储需要提交的额外属性 -->
  <input type="hidden" name="selected_option_id" id="selected_option_id">
  <input type="hidden" name="selected_option_text" id="selected_option_text">

  <button type="submit">提交</button>
</form>

2. 加少量JS监听表单元素变化，把属性值同步到隐藏域：

const citySelect = document.getElementById('city_select')
citySelect.addEventListener('change', function() {
  const activeOption = this.options[this.selectedIndex]
  // 把需要的属性值赋值给隐藏域
  document.getElementById('selected_option_id').value = activeOption.dataset.optionId
  document.getElementById('selected_option_text').value = activeOption.dataset.text
})

3. Django后端直接读取参数即可：

def submit_handler(request):
    if request.method == "POST":
        city_code = request.POST.get("city_code")
        # 直接获取额外属性值
        selected_id = request.POST.get("selected_option_id")
        selected_text = request.POST.get("selected_option_text")
        # 后续业务逻辑

方案2：AJAX异步提交时自定义携带参数 #

如果你的表单是通过AJAX异步提交，不需要刷新页面，可以在提交时直接收集需要的属性加入请求参数：

const form = document.getElementById('your_form')
form.addEventListener('submit', function(e) {
  e.preventDefault()
  const submitData = new FormData(this)
  // 追加需要的额外属性
  const targetInput = document.getElementById('target_input')
  submitData.append('target_input_id', targetInput.id)
  submitData.append('target_input_text', targetInput.textContent)
  // 发送请求，注意携带CSRF Token
  fetch('/your-submit-url/', {
    method: 'POST',
    body: submitData,
    headers: {
      'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
    }
  })
})

后端取值逻辑和方案1完全一致。

特殊场景优化：固定属性无需前端传输 #

如果你需要的属性是页面渲染时就固定的常量，比如name="username"的输入框固定id是user_login_input、固定提示文本是“用户名”，直接在后端维护name和对应属性的映射关系即可，不需要前端额外传输，还能避免参数被篡改的风险。

• 所有前端传输的参数都存在被用户篡改的可能，涉及业务校验的内容必须在后端二次验证，不要直接信任前端传入的属性值。
• 如果表单选项的内容本身来自后端数据库，也可以直接通过request.POST.get拿到的value值查询数据库获取对应的文本、id等信息，安全性更高。

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