Django 表单不会从 ajax POST 请求中加载 MultipleChoiceField 数据

问题描述

MultipleChoiceField 有一个奇怪的问题，它不返回 POST QueryDict

中的项目

这是表格

class TranslationLanguagesForm(forms.Form):
    languages = forms.MultipleChoiceField(
        widget=forms.SelectMultiple(attrs={"novalidate": "",}),choices=languages,required=False,)

视图类似于（缩短）：

class AjaxSpotlerCreateView(View):
    def post(self,request):
        # ...
        # some code before
        #
        translation_form = TranslationLanguagesForm(
            self.request.POST,prefix="translation"
            )
        if translation_form.is_valid():
            translation_languages = translation_form.cleaned_data.get(
                "languages"
                )
        #
        # some code after
        #        

我不会写整个模板，但表单创建的 html 符合我的预期：

<select name="translation-languages" novalidate="" class="form-control " id="id_translation-languages" multiple=""> 
<option value="fr">french</option> 
<option value="en">english</option> <option value="es">spanish</option> </select>

通过ajax请求发送数据的jquery如下：

function ajaxPOST() {
  var dismiss = false;
  $.ajax({
    method: "POST",url: ajaxURL,data: getFormData(),beforeSend: function () {},success: function (data) {
      $target.find(".modal-content").html(data);
      if (data.length == 0) dismiss = true;
    },complete: function () {
      if (dismiss) hideUploadModal();
      else showUploadModal();
    },//complete
  }); //ajax
}

function getFormData() {
  const result = {};
  const $form = $target.find("form#video-loader-form");
  const $inputs = $form.find("input,select,textarea");
  $inputs.each((_,element) => {
    const $element = $(element);
    const type = $element.attr("type");
    const name = $element.attr("name");
    if (name && type == "checkbox" && $element.prop("checked"))
      result[name] = $element.prop("checked");
    else if (name && type != "checkbox") result[name] = $element.val();
  });
  return result;
}

问题是请求的数据永远不会“填充”表单。POST 和 translation_languages 总是收到一个空列表。

...但是 self.request.POST.getlist("translation-languages[]") 返回正确的值

它只发生在 MultipleChoiceField 而 ChoiceField 返回正确的值

这里是 POST 数据（您看到的数据多于有问题的表单所需的数据，因为视图中有 4 个表单和 1 个表单集）：

似乎 ajax POST 返回的 dict 也为多选创建了一个奇怪的名称。字段名称后缀数组符号：[]... 所以我得到了 'translation-languages[]': ['fr','es'] 而不是 'translation-languages': ['fr','es']

解决方法

我终于明白了！

问题在于我在 jquery 中构建 POST 数据的方式。 我通过收集所有输入字段名称和值创建了一个字典，但它返回了一个带有错误字段名称的查询字典，通过用括号将其后缀。

我应该使用 $form.serialize() 我已经进行了更改，现在可以按预期工作