如何用JavaScript发送带重复键payload的传统非API类型POST请求

核心实现思路 #

传统HTML原生表单天然支持同名称多参数值提交，不需要手动拼接参数字符串，只需为每个_selected_action值创建独立的隐藏input元素即可，提交时会自动生成&_selected_action=5&_selected_action=10格式的请求体，完全匹配Django Admin的参数解析规则。

可直接复用的代码实现 #

// 入参说明：
// selectedIds: 选中的记录ID数组，例如 [5, 10]
// adminActionUrl: Django Admin对应操作的提交地址
function submitAdminMultiAction(selectedIds, adminActionUrl) {
  const form = document.createElement('form')
  form.method = 'POST'
  form.action = adminActionUrl
  // 配置表单编码格式，和Django Admin默认要求一致
  form.enctype = 'application/x-www-form-urlencoded'

  // 注入Django必填的CSRF校验参数
  const csrfInput = document.createElement('input')
  csrfInput.type = 'hidden'
  csrfInput.name = 'csrfmiddlewaretoken'
  // 从Cookie中读取Django默认写入的CSRF Token
  csrfInput.value = document.cookie.split('; ').find(row => row.startsWith('csrftoken=')).split('=')[1]
  form.appendChild(csrfInput)

  // 批量注入选中项参数
  selectedIds.forEach(recordId => {
    const actionInput = document.createElement('input')
    actionInput.type = 'hidden'
    actionInput.name = '_selected_action'
    actionInput.value = recordId
    form.appendChild(actionInput)
  })

  // 注入Django Admin要求的操作类型参数，替换为你实际需要执行的操作标识
  const actionTypeInput = document.createElement('input')
  actionTypeInput.type = 'hidden'
  actionTypeInput.name = 'action'
  actionTypeInput.value = 'delete_selected' // 示例为批量删除，可替换为自定义操作名
  form.appendChild(actionTypeInput)

  // 执行提交
  document.body.appendChild(form)
  form.submit()
  document.body.removeChild(form)
}

常见问题说明 #

之前手动拼接URLSearchParams后无法正常提交的原因是：如果将拼接好的完整参数字符串作为单个input的值提交，后台只会识别为单个_selected_action参数，无法解析为数组。只有创建多个同name的独立input元素，才能触发表单的多值提交逻辑。

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