使用 Ajax 发布 Django 表单数据时呈现验证错误

Question

在使用 Ajax 处理 Django 表单的 POST 请求时，通常如何处理验证错误？

我是一名服务器端开发人员，涉足一点纯 JS 来学习技巧。我完成了 AJAX 方法来处理 Django 表单的 POST 请求，但现在不确定如何呈现验证错误。

例如，这是一个简单的 Django 表单：

class TextForm(forms.Form):

    reply = forms.CharField(widget=forms.Textarea(attrs={'cols':30,'class': 'cxl','autocomplete': 'off','autofocus': 'autofocus'}))

    def __init__(self,*args,**kwargs):
        super(TextForm, self).__init__(*args,**kwargs)
        self.fields['reply'].widget.attrs['id'] = 'text_field'

    def clean(self):
        data = self.cleaned_data
        reply = data["reply"].strip()
        if not reply:
            raise forms.ValidationError('Write something')
        elif len(reply) > 1500:
            raise forms.ValidationError("Can't exceed 1500 chars")
        return reply

下面是 Ajax 请求的工作原理：

function overwrite_default_submit(e) {
  // block the default behavior
  e.preventDefault();

  // create and populate the form with data
  var form_data = new FormData();
  form_data.append("reply", text_field.value);

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', e.target.action);
  xhr.setRequestHeader("X-CSRFToken", get_cookie('csrftoken'));
  xhr.send(form_data);
}

在这种情况下捕获和显示验证错误的最佳模式是什么？此外，如果涉及文件上传字段怎么办？希望看到专家如何做到这一点的说明性示例。

注意：在这一点上我更喜欢纯 JS，因为这是我开始的。 JQuery 在我的雷达上，但我会在未来看看它。

Answer 1

在 Django 视图中，在form.is_valid() 失败的地方，可以进一步检查if request.is_ajax()。在此块中，可以返回如下结构的 HTTPResponse（或 JSONResponse）：

payload = {}
payload['success'] = False
payload['message'] = ERR_MSG['generic']
return HttpResponse(json.dumps(payload),content_type='application/json',)

反过来，这可以在 AJAX 方面被捕获，如下所示：

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200)
        {
            var resp = JSON.parse(this.responseText);
            if (!resp.success) {
                console.log(resp.message);
            } else {
                console.log("success at last");
            }
        }
    }; 

一旦payload达到了JS的境界，就可以进行相应的渲染了。

当/如果我发现更多（并且在有保证的情况下）时，我会为这个答案添加更多复杂性。一遍又一遍。