Django Form 不从 ajax POST 请求加载 MultipleChoiceField 数据

Posted 2023-02-19

【中文标题】Django Form 不从 ajax POST 请求加载 MultipleChoiceField 数据

【英文标题】：Django Form does not load MultipleChoiceField data from ajax POST request

【发布时间】：2021-04-14 05:04:39

【问题描述】：

我有一个关于 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;

问题是表单永远不会被 request.POST 的数据“填充”，而 translation_languages 总是收到一个空列表。

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

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

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

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

【参考方案1】：

好吧，我终于明白了！

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

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