Django表单不从ajax POST请求加载多个EchoiceField数据

Question

我遇到了一个奇怪的问题，multipleechoicefield不返回POSTQueryDict

这是表格

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_语言总是收到一个空列表

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

它只发生在多回声场上，而ChoiceField返回正确的值

以下是POST数据（由于视图中有4个表单和1个表单集，因此您看到的数据比问题表单所需的数据多）：

<QueryDict: {'csrfmiddlewaretoken': ['bQQzHTR4JDFZFnmO1ExlPZhqURHswXTmXA9RGC2c05pBM63ns2gnVwUnbnwGzor1'], 'transcription-language': ['en-us'], 'translation-languages[]': ['fr', 'es'], 'spotlers-TOTAL_FORMS': ['1'], 'spotlers-INITIAL_FORMS': ['1'], 'spotlers-MIN_NUM_FORMS': ['0'], 'spotlers-MAX_NUM_FORMS': ['1000'], 'spotlers-0-url': ['https://test-dev-s.storage.googleapis.com/uploads/FR/5e24512/2021/1/9fccac26/9fc37a26-2545-434f-8bd2-0afc3df839aa_full.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=storage%40funky-tower-264412.iam.gserviceaccount.com%2F20210108%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210108T125533Z&X-Goog-Expires=3600&X-Goog-SignedHeaders=host&x-goog-signature=8e737cbc384fab5e11002cbc5e6308'], 'spotlers-0-id': ['9fc37a26-1893-434f-8bd2-0afc3df839ef'], 'spotlers-0-name': ['ultraclimb'], 'spotlers-0-duration': ['00:02:43'], 'spotlers-0-is_postedited': ['true'], 'keywords-keywords': [''], 'glossary-glossary': ['']}>

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

Answer 1

我终于明白了

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

我宁愿使用$form.serialize() 我已经做出了改变，现在一切如期进行