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");
            }
        }
    };

一旦有效载荷到达JS领域，就可以继续相应地渲染它。

如果我发现更多（并且有必要），我会在这个答案中添加更多复杂性。过来。

使用Ajax POST Django表单数据时出现验证错误

1 个答案: