如何将 Ajax 合并到 CreateView 中？

Question

我有一个 CreateView...它在传统意义上可以正常工作。我试图将其本质上转换为 AJAX 以进行提交，因为用户可以将文件附加到表单，并且我试图避免基于用户错误的表单提交失败。这是我的 CreateView...

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

   def form_valid(self, form):
        instance = form.save()

    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...

 $(document).ready(function (){

  var token = '{{csrf_token}}';

  $("#forms").on('submit', function(event) {
        event.preventDefault();
        var newprocedure = '{{ newprocedure }}';
        $.ajax({
            type: "POST",
            headers: { "X-CSRFToken": token },
            url: "{% url 'Procedures:ajax_posting' %}",
            data:$("#forms").serialize(),
            datatype:'json',
            success: function(data) {
              console.log("here");
              if (data['success'])
                 alert("successfully added to favorites")
            }
        });
   });
 });

这是我试图调用的视图...

def ajax_posting(request):
    user = request.user
    data = request.POST
    form = CreateProcedureForm(user,data=data)
    if request.method=='POST':  
        return JsonResponse({'success':'True'})
    else:
        print(form.errors)
    return JsonResponse(data)

我可以看到它正在调用视图，因为 print(form.errors) 向我显示了必填字段的一堆错误，我希望这是因为在我填写后表单似乎没有被处理，并且点击提交绝对没有任何反应。

提前感谢您的任何想法。我是 AJAX 的新手。

Answer 1

您可以使用之前的视图进行处理。它只需要一点点调整。

提交时，您可能希望在 ajax 脚本中将表单实例化为 JS FormData

data:  FormData(forms[0])

这样就可以用 django 接收数据了

data = request.POST

然后用你的 django 表单实例化它以进行处理

form = RegForm(data=data)