Comment soumettre un formulaire sans rafraîchir la page en utilisant Django, Ajax, jQuery?

Je suis novice à travailler avec django. J'ai besoin d'exemple simple.
Comment soumettre un formulaire (post) sans rafraichissement de la page à l'aide de Django, Ajax, jQuery?

C'est ma forme, points de vue et modèle:

views.py

from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        else:
            message = 'something wrong!'


        return render_to_response('contact/advert.html',
                {'message':message},
            context_instance=RequestContext(request))

    else:
        return render_to_response('contact/advert.html',
                {'form':AdvertForm()},
            context_instance=RequestContext(request))

forms.py (formulaire à l'aide de "ModelForm")

from django import forms
from django.forms import ModelForm
from linki.models import Advert


class AdvertForm(ModelForm):
    class Meta:
        model = Advert

MODÈLES (forme de code html)

<html>
<head>

</head>
    <body>
    <h1>Leave a Suggestion Here</h1>
        {% if message %}
            {{ message }}
        {% endif %}
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
    </body>
</html>

source d'informationauteur webfanks

  1. 14

    si vous avez l'intention d'utiliser de l'ajax soumettre avec jquery, vous ne devez pas renvoyer le code html de votre point de vue.. je vous propose de faire ceci à la place:

    html:

    <html>
<head>
</head>
<body>
    <h1>Leave a Suggestion Here</h1>
        <div class="message"></div>
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
</body>
</html>

    la js

    $('#form').submit(function(e){
    $.post('/url/', $(this).serialize(), function(data){ ... 
       $('.message').html(data.message);
       //of course you can do something more fancy with your respone
    });
    e.preventDefault();
});

    l'views.py

    import json
from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        message = 'something wrong!'
        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        return HttpResponse(json.dumps({'message': message}))

    return render_to_response('contact/advert.html',
            {'form':AdvertForm()}, RequestContext(request))

    de sorte que vous mettez la réponse dans le message div. au lieu de retourner en simple html, vous devriez retour json.

  2. 6
    <script type="text/javascript">
$(document).ready(function() {
    $('#form_id').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..
                $('#success_div).html(response); //update the DIV
            },
            error: function(e, x, r) { //on error..
                $('#error_div).html(e); //update the DIV
            }
        });
        return false;
    });
});
</script>
  3. 1
    $('#form-id').submit(function(e){
    $.post('your/url', $(this).serialize(), function(e){ ... });
    e.preventDefault();
});