Django后端无法获取FormData中JS追加的taglist数组问题

问题描述 #

在Django模板中编写了如下JS脚本：

const formData = new FormData(form);

formData.append('taglist', JSON.stringify(selectedTagIds));

console.log(JSON.parse(formData.get('taglist')))
console.log(formData.get('title_raw'))

form.submit()

其中selectedTagIds是一个数组，控制台可正常打印该数组及表单的title_raw字段，但提交表单后，Django视图能获取所有标准表单字段，却无法获取追加的taglist字段，打印结果为None。

问题根源 #

你创建了修改后的FormData对象并追加了字段，但没有将这个修改后的实例绑定到表单的提交流程中。直接调用form.submit()会触发表单的原生提交逻辑，只会携带表单原本的字段，完全没用到你处理过的FormData。

解决方法 #

1. 替换提交方式，用fetch/XHR发送修改后的FormData #

阻止表单默认提交行为，通过fetch或XMLHttpRequest手动发送包含taglist的FormData：

const form = document.querySelector('your-form-selector'); // 替换成你的表单选择器

form.addEventListener('submit', function(e) {
  // 阻止原生提交
  e.preventDefault();
  
  const formData = new FormData(form);
  formData.append('taglist', JSON.stringify(selectedTagIds));
  
  // 用fetch发送请求
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(response => {
    // 处理提交后的逻辑，比如跳转或提示
    if (response.ok) {
      window.location.href = '/success/'; // 替换成你的成功页面地址
    }
  })
  .catch(err => console.error('提交失败:', err));
});

2. 额外注意事项 #

• 确保表单的method属性为POST：GET请求无法通过FormData携带追加字段（GET会自动将表单原生参数拼在URL上，但不会处理你手动追加的内容）
• Django视图中获取字段：用request.POST.get('taglist')拿到JSON字符串后，再用json.loads()解析为数组：

  import json
  
  def your_view(request):
      if request.method == 'POST':
          taglist_raw = request.POST.get('taglist')
          if taglist_raw:
              selected_tag_ids = json.loads(taglist_raw)
              # 后续逻辑处理
  

内容的提问来源于stack exchange，提问作者Andras Vincze-Nagy