Arrêter la redirection après la soumission de formulaire dans Django

Question

J'utilise django et j'ai créé une application dans laquelle je veux télécharger un fichier zip qui est enregistré dans un emplacement spécifique (A ce stade, mon serveur django est localhost) I ont le code suivant qui fonctionne très bien:

Ceci est mon modèle HTML:

<form id="saveZipFile" enctype="multipart/form-data" action="" method="post"> 
    {% csrf_token %} 
    <input type="file" name="docfile" id="docfile"> 
    <input type="submit" id="upload-button" value="Upload"> 
</form> 

Ceci est mon forms.py:

class UploadFileForm(forms.Form): 
    docfile = forms.FileField() 

C'est mon views.py:

def handle_uploaded_file(f): 
    with open('uploaded_zip.zip', 'wb+') as destination: 
     for chunk in f.chunks(): 
      destination.write(chunk) 


def upload_file(request): 
    if request.method == 'POST': 
     form = UploadFileForm(request.POST, request.FILES) 
     if form.is_valid(): 
      handle_uploaded_file(request.FILES['docfile']) 
      return HttpResponse() 
    else: 
     form = UploadFileForm() 
     return HttpResponse() 

urls.py:

urlpatterns = [ 
    url(r'^upload_file/$', views.upload_file, name='upload_file'), 
] 

Mais à la fin, l'URL est en train de changer à /upload_file - ce qui est correct que je comprends - et cette page est vide (puisque je Je retourne un vide HttpResponse)

J'essaye de construire une application de page unique et cette redirection jette l'état entier de ma page Web hors de la fenêtre.

Est-il possible de faire un appel AJAX au lieu d'utiliser des formulaires django?

Merci!

EDIT

J'ai ajouté un appel ajax qui reçoit le fichier téléchargé et il envoie à la vue django.

appel AJAX:

var selectedFile = $('#docfile').files[0]; 

var fd = new FormData(); 
fd.append("file", selectedFile); 
$.ajax({method: 'POST', 
     url: 'upload_file', 
     data: fd, 
     headers: {'Content-Type': undefined, 
        'X-CSRFToken': getCookie('csrftoken') 
     }, 
     cache: false, 
     processData: false}) 
     .done(function(data) { 
      alert(data) 
     }); 

Mais dans la vue quand j'imprimer request.POST, je reçois ce gâchis (et beaucoup, beaucoup de lignes de celui-ci):

<QueryDict: {u'\x00\x00userapp/.git/objects/0e/34e20fc7131238973f102fe6d2d7fe102d12f4UT\x05\x00\x03\ufffd': [u'\xc0Yux\x0b\x00\x01\x04\xe8\x03\x00\x00\x04\xe8\x03\x00\x00PK\x01\x02\x1e\x03\n\x00\x00\x00\x00\x001\x852K\x00\x00\x00\x00\x00\x00\ 

Answer 1

Vous devez utiliser ajax pour cela, récupérer les données du formulaire, faire la demande et retourner false, ce qui empêche la redirection de se produire. Cela devrait ressembler à ceci:

$(function() { 
    $('form').submit(function() { 
     $.ajax({ 
      type: 'POST', 
      url: 'form-submit.php', 
      data: { name: $(this).name.value, 
        surname: $(this).surname.value } 
     }); 
     return false; 
    }); 
})