Comment POSER un formulaire django avec AJAX & jQuery

Puisque vous utilisez jQuery pourquoi ne pas utiliser les éléments suivants:

 <script language="JavaScript"> $(document).ready(function() { $('#YOUR_FORM').submit(function() { // catch the form's submit event $.ajax({ // create an AJAX call... data: $(this).serialize(), // get the form data type: $(this).attr('method'), // GET or POST url: $(this).attr('action'), // the file to call success: function(response) { // on success.. $('#DIV_CONTAINING_FORM).html(response); // update the DIV } }); return false; }); }); </script> 

MODIFIER

Comme indiqué dans les commentaires, parfois ce qui précède ne fonctionnera pas. Essayez donc ce qui suit:

 <script type="text/javascript"> var frm = $('#FORM-ID'); frm.submit(function () { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { $("#SOME-DIV").html(data); }, error: function(data) { $("#MESSAGE-DIV").html("Something went wrong!"); } }); return false; }); </script> 

Vous pouvez accéder aux données sur la demande POST en utilisant le nom de la variable, dans votre cas:

 request.POST["noteid"] request.POST["phase"] request.POST["parent"] ... etc 

L'objet request.POST est introuvable. Vous devez affecter la valeur à une variable, puis la manipuler.

Je vous conseillerais d'utiliser ce plugin JQuery , afin que vous puissiez écrire des formulaires HTML normaux, puis les mettre en surbrillance vers AJAX. Avoir $ .post partout dans votre code est un peu fastidieux.

Aussi, utilisez la vue Réseau sur Firebug (pour Firefox) ou les Outils de développement pour Google Chrome afin que vous puissiez voir ce qui est envoyé par vos appels AJAX.

Quelque chose à surveiller est de renvoyer le formulaire sous forme de html à un mode.

Views.py

 @require_http_methods(["POST"]) def login(request): form = BasicLogInForm(request.POST) if form.is_valid(): print "ITS VALID GO SOMEWHERE" pass return render(request, 'assess-beta/login-beta.html', {'loginform':form}) 

Vue simple pour retourner le html coupé

Formulaire html Snipped

 <form class="login-form" action="/login_ajx" method="Post"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="header">Authenticate</h4> </div> <div class="modal-body"> {%if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{%endif%} <div class="fieldWrapper form-group has-feedback"> <label class="control-label" for="id_email">Email</label> <input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}"> {%if form.email.errors %}<div class="alert alert-danger">{{ form.email.errors }}</div>{%endif%} </div> <div class="fieldWrapper form-group has-feedback"> <label class="control-label" for="id_password">Password</label> <input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}"> {%if form.password.errors %}<div class="alert alert-danger">{{ form.password.errors }}</div>{%endif%} </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <input type="submit" value="Sign in" class="btn btn-primary pull-right"/> </div> </form> 

Page contenant le modal

 <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog">{% include "assess-beta/login-beta.html" %}</div> 

Utilisez la balise include pour charger le chargement de la page affichée afin qu'elle soit disponible lorsque vous ouvrez le mode.

Modal.js

 $(document).on('submit', '.login-form', function(){ $.ajax({ type: $(this).attr('method'), url: this.action, data: $(this).serialize(), context: this, success: function(data, status) { $('#LoginModal').html(data); } }); return false; }); 

En utilisant le .on () dans ce cas, travaillez comme .live () la clé étant liant l'événement submit non au bouton mais au document.

Comme les autres réponses fonctionnent, je préfère utiliser le plugin de formulaire jQuery . Il prend pleinement en charge ce que vous voulez et plus encore. La vue de publication est traitée comme d'habitude dans la partie Django, en revenant simplement au HTML qui est remplacé.

Du côté du serveur, votre code django peut traiter la publication AJAX de la même façon qu'elle traite d'autres formations. Par exemple,

Views.py

 def save_note(request, space_name): """ Saves the note content and position within the table. """ place = get_object_or_404(Space, url=space_name) note_form = NoteForm(request.POST or None) if request.method == "POST" and request.is_ajax(): print request.POST if note_form.is_valid(): note_form.save() msg="AJAX submission saved" else: msg="AJAX post invalid" else: msg = "GET petitions are not allowed for this view." return HttpResponse(msg) 

J'ai supposé que votre NoteForm est un ModelForm – ce qu'il devrait être – afin qu'il ait une méthode de sauvegarde. Notez que, en plus d'ajouter la commande save() , j'ai changé votre request.is_ajax pour request.is_ajax() , ce que vous voulez (si vous utilisez request.is_ajax votre code vérifiera simplement si la requête a une méthode appelée is_ajax , Ce qui évidemment le fait).

La plupart des exemples d'utilisation d'AJAX POST avec des formulaires Django, y compris l'exemple officiel:

https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example

Sont bien lorsque ModelForm.clean() n'a pas form_valid erreurs ( form_valid ). Cependant, ils ne comportent pas une partie difficile: la traduction des erreurs ModelForm via la réponse AJAX au côté client Javascript / DOM.

Mon application enfichable utilise le routage de réponse AJAX avec les modèles de vision côté client pour afficher automatiquement la vue de classe AJAX Post ModelForm validation de ModelForm semblables à la manière dont ils seraient affichés dans HTTP POST traditionnel:

https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html

Jinja2 et Django Template Engine sont pris en charge.