AJAX

Question

내가 아약스를 통해 이미지 인라인의 formset을 처리하기 위해 노력하고있어 통해 이미지 장고 인라인의 formset을 게시하는 방법 :

class UserDogCreateForm(forms.ModelForm): 
    class Meta: 
     model = UserDog 
     fields = ['name', 'breed', 'gender'] 


class UserDogImageCreateForm(forms.ModelForm): 
    class Meta: 
     model = UserDogImage 
     fields = ['image', 'dog'] 
     labels = {'image': ''} 


UserDogCreateFormSet = forms.inlineformset_factory(
    UserDog, 
    UserDogImage, 
    form=UserDogImageCreateForm, 
    extra=3, 
    can_delete=False, 
    can_order=False, 
) 

views.py

forms.py

class UserDogCreateView(LoginRequiredMixin, CreateView): 
    model = UserDog 
    form_class = UserDogCreateForm 

    def get_context_data(self, **kwargs): 
     context = super(UserDogCreateView, self).get_context_data(**kwargs) 
     if self.request.POST: 
      context['dog_image_inlines'] = UserDogCreateFormSet(self.request.POST, self.request.FILES) 
     else: 
      context['dog_image_inlines'] = UserDogCreateFormSet() 
     return context 

    def form_valid(self, form): 
     context = self.get_context_data() 
     inlines = context['dog_image_inlines'] 
     with transaction.atomic(): 
      if inlines.is_valid(): 
       form.instance.user = self.request.user 
       self.object = form.save() 
       inlines.instance = self.object 
       inlines.save() 
       user_dogs = UserDog.objects.filter(user=self.request.user) 
       return JsonResponse({'form_is_valid': True, 'user_dogs': serializers.serialize('json', user_dogs)}) 
      else: 
       return JsonResponse({'form_is_valid': False}) 

    def form_invalid(self, form): 
     return JsonResponse({'form_is_valid': False}) 

.html

개

<form id="dog-create-form" enctype="multipart/form-data" action="{% url 'dog-create' %}" method="post"> 
    {% csrf_token %} 
    {{ form }} 
    {{ dog_image_inlines.as_p }} 
    <button type="submit">Submit</button> 
</form> 

의 .js

var dogCreateForm = $('#dog-create-form'); 
dogCreateForm.submit(function(e){ 
    e.preventDefault(); 
    var data = new dogCreateForm.serialize(); 
    console.log(data); 
    $.ajax({ 
     url: '/accounts/dog-create/', 
     type: 'post', 
     dataType: 'json', 
     data: data, 
     success: function(data) { 
      if (data.form_is_valid) { 
       console.log('Dog created!'); // <-- This is just a placeholder for now 
      } else { 
       console.log('Dog not created!') 
      } 
     }, 
    }); 
}) 

은 후 UserDog 데이터가 저장 제출,하지만 이미지가 UserDogImage에 저장하지 않고 모든 forms.py와 views.py에 괜찮처럼 보인다.

은 나뿐만 아니라

var data = new FormData(dogCreateForm); 

시도했지만 어떤 이유로

Answer 1

같은 문제가 그냥 그런 FormData를 사용하고자하는 경우에 대한 FormData 내부 csrftokenmiddleware가 표시되지 않는 원인은, (403)를 제공합니다

의 .js

var dogCreateForm = $('#dog-create-form'); 
dogCreateForm.submit(function(e){ 
    e.preventDefault(); 
    var data = new FormData(this); 
    $.ajax({ 
     url: '/accounts/dog-create/', 
     type: 'post', 
     dataType: 'json', 
     data: data, 
     processData: false, 
     contentType: false, 
     success: function(data) { 
      if (data.form_is_valid) { 
       console.log('Dog created!'); // <-- This is just a placeholder for now for testing 
      } else { 
       console.log('Dog not created!') 
      } 
     }, 
    }); 
})