如何让来自 Ajax 的 Django 表单错误出现在用户屏幕上？

Posted 2023-02-24

【中文标题】如何让来自 Ajax 的 Django 表单错误出现在用户屏幕上？

【英文标题】：How do I get Django form errors from Ajax to appear on the user screen?

【发布时间】：2021-12-07 13:54:58

【问题描述】：

也许我没有清楚地思考......但如果我通过 AJAX 提交表单......我可以通过传统 html 方法提交的相同表单对我来说似乎是有道理的能够像通过 HTML 提交一样获取表单错误并显示它们吗？如果我打印它们，我当然可以在我的控制台中得到 form.errors ......但我似乎无法弄清楚如何让它们回到模板中，以便它们呈现在用户的屏幕上。 JSONRESPONSE 在不同的屏幕上显示它们……但我怎样才能让它们回到表单本身？

这是我的观点...

class CreateProcedureView(LoginRequiredMixin,CreateView):
    model = NewProcedure
    form_class = CreateProcedureForm
    template_name = 'create_procedure.html'

def form_valid(self, form):
    instance = form.save()
    return JsonResponse('success': True )

def form_invalid(self, form):
    response = JsonResponse("error": "there was an error")
    response.status_code = 403 # To announce that the user isn't allowed to publish
    return response

def post(self, request, *args, **kwargs):
    if "cancel" in request.POST:
        return HttpResponseRedirect(reverse('Procedures:procedure_main_menu'))
    else:
        self.object = None
        user = request.user
        form_class = self.get_form_class()
        form = self.get_form(form_class)
        file_form = NewProcedureFilesForm(request.POST, request.FILES)
        files = request.FILES.getlist('file[]')
        if form.is_valid() and file_form.is_valid():
            procedure_instance = form.save(commit=False)
            procedure_instance.user = user
            procedure_instance.save()
            list=[]
            for f in files:
                procedure_file_instance = NewProcedureFiles(attachments=f, new_procedure=procedure_instance)
                procedure_file_instance.save()
            return self.form_valid(form)
        else:
            form_class = self.get_form_class()
            form = self.get_form(form_class)
            file_form = NewProcedureFilesForm(request.POST, request.FILES)
            return self.form_invalid(form)

这是我的 Ajax...

     $.ajax(
         url: "% url 'Procedures:create_procedure' %",
         headers:  "X-CSRFToken": token ,
         method: "post",
         data: $("#forms").serialize() + "&status=" + "Submitted",
         success: function(data)
               alert(data.message);
           ,
           error: function(data)
              alert(data.status); 
              alert(data.responseJSON.error); 
           
     );
    );

【问题讨论】：

这对所涉及的问题进行了很好的介绍：realpython.com/django-and-ajax-form-submissions

【参考方案1】：

例如，如果您在表单输入下有一个 span 标签

<span id="error_first_name"></span>

使用 Jquery 追加 $('#error_first_name").text(data.responseJSON.error.first_name[0])