web-dev-qa-db-fra.com

Comment puis-je POST avec jQuery / Ajax dans Django?

J'essaie de POST données en utilisant jQuery/AJAX dans Django et j'ai des problèmes. Lorsque j'exécute le code ci-dessous et clique sur le bouton "test", la page entière se recharge à nouveau, ce qui n'est pas ce que je veux faire (c'est pourquoi j'utilise AJAX).

Je ne suis pas non plus en mesure de confirmer la demande AJAX obtient la vue Django.

EDIT: J'ai fait les modifications pour return false et event.preventDefault(). Une nouvelle page ne se charge pas, mais je ne parviens toujours pas à voir le texte mis à jour dans le <div id='message'> champ. Je ne sais pas si les données sont envoyées. Je vois dans la console:

POST /edit_favorites/ HTTP/1.1" 403 2294

views.py:

from Django.shortcuts import render_to_response
from Django.http import HttpResponse

def edit_favorites(request):
    if request.is_ajax():
        message = "Yes, AJAX!"
    else:
        message = "Not Ajax"
    return HttpResponse(message)

rls.py:

url(r'^edit_favorites/', 'edit_favorites'),

HTML :

<form method='post' id='test'>
  <input type="hidden" value="video34"/>
  <input type='submit' value='Test button'/>
  <div id='message'>Initial text</div>
</form>

JavaScript:

$(document).ready(function () {
  $("#test").submit(function (event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "/edit_favorites/",
      data: {
        'video': $('#test').val() // from form
      },
      success: function () {
        $('#message').html("<h2>Contact Form Submitted!</h2>")
      }
    });
    return false;
  });
});

Aucun conseil?

jquerypythonajaxdjangopost
15
sharataka

return false; Mal placé. Il doit se trouver à la fin de la fonction .submit(). Alors déplacez-le d'une ligne vers le haut:

$(document).ready(function () {
  $("#test").submit(function (event) {
    $.ajax({
      type: "POST",
      url: "/edit_favorites/",
      data: {
        'video': $('#test').val() // from form
      },
      success: function () {
        $('#message').html("<h2>Contact Form Submitted!</h2>")
      }
    });
    return false; //<---- move it here
  });

});

MISE À JOUR:

À propos du problème POST /edit_favorites/ HTTP/1.1" 403 2294. Vérifiez sur ce post qui ressemble à votre problème:

11
Muthu Kumaran

les méthodes suivantes ont fonctionné pour moi. et j'espère vous aider aussi.

from Django.views.decorators.csrf import csrf_exempt
from Django.http import HttpResponse

@csrf_exempt
def edit_favorites(request):
    if request.is_ajax():
        message = "Yes, AJAX!"
    else:
        message = "Not Ajax"
    return HttpResponse(message)
5
Zhengquan Feng

Ce qui se passe ici, c'est que lorsque vous soumettez un formulaire HTML, il envoie les données du formulaire à l'attribut action du <form>. Dans votre javascript, vous vous abonnez à l'événement submit du formulaire, mais vous ne désactivez jamais le comportement par défaut du formulaire, qui est de suivre l'attribut action. Dans jQuery, vous pouvez modifier ce comportement en appelant la méthode preventDefault sur l'argument d'événement et en renvoyant false (si vous appelez preventDefault, puis en renvoyant false est pas nécessaire mais il vaut mieux s'en assurer ...):

$(...).submit(function(e) {
    e.preventDefault();
    ...
    return false;
});

[~ # ~] modifier [~ # ~]

Quant à l'erreur, votre erreur n'est pas très utile mais j'ai le pressentiment que vous ne validez pas CSRF. Explication plus détaillée de cela ici . Cependant, la solution rapide consiste simplement à inclure le fichier this en plus de votre jQuery et à ajouter ensure_csrf_cookie décorateur à votre vue.

4
miki725