如何将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)