Wie kann ich Ajax in Django-Anwendungen integrieren?

Neben der hervorragenden Antwort von yuvi möchte ich ein kleines spezifisches Beispiel hinzufügen, wie mit Django umzugehen ist (jenseits von js, die verwendet werden sollen). Das Beispiel verwendet AjaxableResponseMixin und setzt ein Autorenmodell voraus.

import json

from Django.http import HttpResponse
from Django.views.generic.edit import CreateView
from myapp.models import Author

class AjaxableResponseMixin(object):
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def render_to_json_response(self, context, **response_kwargs):
        data = json.dumps(context)
        response_kwargs['content_type'] = 'application/json'
        return HttpResponse(data, **response_kwargs)

    def form_invalid(self, form):
        response = super(AjaxableResponseMixin, self).form_invalid(form)
        if self.request.is_ajax():
            return self.render_to_json_response(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        response = super(AjaxableResponseMixin, self).form_valid(form)
        if self.request.is_ajax():
            data = {
                'pk': self.object.pk,
            }
            return self.render_to_json_response(data)
        else:
            return response

class AuthorCreate(AjaxableResponseMixin, CreateView):
    model = Author
    fields = ['name']

Quelle: Django-Dokumentation, Formularverarbeitung mit klassenbasierten Ansichten

Der Link zur Version 1.6 von Django ist nicht mehr verfügbar, aktualisiert auf Version 1.11

Einfach und schön. Sie müssen Ihre Ansichten nicht ändern. Bjax kümmert sich um alle Ihre Links. Schau dir das an: Bjax

Verwendungszweck:

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

Fügen Sie dies schließlich in HEAD Ihrer HTML-Datei ein:

$('a').bjax();

Weitere Einstellungen finden Sie hier: Bjax Demo

Ich habe versucht, AjaxableResponseMixin in meinem Projekt zu verwenden, hatte aber die folgende Fehlermeldung erhalten:

Nicht ordnungsgemäß konfiguriert: Keine URL, an die weitergeleitet werden soll. Geben Sie entweder eine URL an oder definieren Sie eine get_absolute_url-Methode für das Model.

Das liegt daran, dass CreateView eine redirect-Antwort zurückgibt, anstatt eine HttpResponse zurückzugeben, wenn Sie eine JSON-Anforderung an den Browser senden. Ich habe also einige Änderungen an der AjaxableResponseMixin vorgenommen. Wenn es sich bei der Anforderung um eine Ajax-Anforderung handelt, wird die super.form_valid-Methode nicht aufgerufen. Rufen Sie einfach die form.save() direkt auf.

from Django.http import JsonResponse
from Django import forms
from Django.db import models

class AjaxableResponseMixin(object):
    success_return_code = 1
    error_return_code = 0
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def form_invalid(self, form):
        response = super(AjaxableResponseMixin, self).form_invalid(form)
        if self.request.is_ajax():
            form.errors.update({'result': self.error_return_code})
            return JsonResponse(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        if self.request.is_ajax():
            self.object = form.save()
            data = {
                'result': self.success_return_code
            }
            return JsonResponse(data)
        else:
            response = super(AjaxableResponseMixin, self).form_valid(form)
            return response

class Product(models.Model):
    name = models.CharField('product name', max_length=255)

class ProductAddForm(forms.ModelForm):
    '''
    Product add form
    '''
    class Meta:
        model = Product
        exclude = ['id']


class PriceUnitAddView(AjaxableResponseMixin, CreateView):
    '''
    Product add view
    '''
    model = Product
    form_class = ProductAddForm

AJAX ist der beste Weg, um asynchrone Aufgaben zu erledigen. Das Tätigen von asynchronen Anrufen wird häufig bei der Erstellung von Websites verwendet. Wir werden anhand eines kurzen Beispiels lernen, wie wir AJAX in Django implementieren können. Wir müssen jQuery verwenden, um weniger Javascript zu schreiben.

Dies ist Contact example, das einfachste Beispiel, das ich verwende, um die Grundlagen von AJAX und seine Implementierung in Django zu erklären. In diesem Beispiel werden wir POST anfordern. Ich folge einem Beispiel dieses Beitrags: https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-Django

models.py

Lassen Sie uns zunächst das Kontaktmodell mit den grundlegenden Details erstellen.

from Django.db import models

class Contact(models.Model):
    name = models.CharField(max_length = 100)
    email = models.EmailField()
    message = models.TextField()
    timestamp = models.DateTimeField(auto_now_add = True)

    def __str__(self):
        return self.name

forms.py

Erstellen Sie das Formular für das obige Modell.

from Django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        exclude = ["timestamp", ]

views.py

Die Ansichten ähneln der funktionsbasierten Erstellungsansicht, aber anstatt mit Render zurückzukehren, verwenden wir die JsonResponse-Antwort.

from Django.http import JsonResponse
from .forms import ContactForm

def postContact(request):
    if request.method == "POST" and request.is_ajax():
        form = ContactForm(request.POST)
        form.save()
        return JsonResponse({"success":True}, status=200)
    return JsonResponse({"success":False}, status=400)

urls.py

Lassen Sie uns die Route der obigen Ansicht erstellen.

from Django.contrib import admin
from Django.urls import path
from app_1 import views as app1

urlpatterns = [
    path('ajax/contact', app1.postContact, name ='contact_submit'),
]

template

Rendern Sie in den Frontend-Bereich das Formular, das über dem Formular-Tag erstellt wurde, zusammen mit csrf_token und der Schaltfläche zum Senden. Beachten Sie, dass wir die JQuery-Bibliothek aufgenommen haben.

<form id = "contactForm" method= "POST">{% csrf_token %}
   {{ contactForm.as_p }}
  <input type="submit" name="contact-submit" class="btn btn-primary" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript

Lassen Sie uns nun über den Javascript-Teil sprechen. Auf dem Formular, das wir senden, stellen wir eine Ajax-Anfrage vom Typ POST, nehmen die Formulardaten und senden sie an die Serverseite.

$("#contactForm").submit(function(e){
    // prevent from normal form behaviour
        e.preventDefault();
        // serialize the form data  
        var serializedData = $(this).serialize();
        $.ajax({
            type : 'POST',
            url :  "{% url 'contact_submit' %}",
            data : serializedData,
            success : function(response){
            //reset the form after successful submit
                $("#contactForm")[0].reset(); 
            },
            error : function(response){
                console.log(response)
            }
        });
   });

Dies ist nur ein einfaches Beispiel für den Einstieg in AJAX mit Django. Wenn Sie mit mehreren weiteren Beispielen tauchen möchten, lesen Sie diesen Artikel: https://djangopy.org/learn/ Step-up-Guide-zu-implementieren-Ajax-in-Django

Ich schreibe das, weil die akzeptierte Antwort ziemlich alt ist und es eine Auffrischung braucht. 

So würde ich Ajax mit Django im Jahr 2019 integrieren :) Und ein reales Beispiel, wann wir Ajax brauchen würden: - 

Nehmen wir an, ich habe ein Modell mit registrierten Benutzernamen und mit Hilfe von Ajax möchte ich wissen, ob ein bestimmter Benutzername existiert. 

html:

<p id="response_msg"></p> 
<form id="username_exists_form" method='GET'>
      Name: <input type="username" name="username" />
      <button type='submit'> Check </button>           
</form>   

ajax:

$('#username_exists_form').on('submit',function(e){
    e.preventDefault();
    var username = $(this).find('input').val();
    $.get('/exists/',
          {'username': username},   
          function(response){ $('#response_msg').text(response.msg); }
    );
}); 

urls.py:

from Django.contrib import admin
from Django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('exists/', views.username_exists, name='exists'),
]

views.py:

def username_exists(request):
    data = {'msg':''}   
    if request.method == 'GET':
        username = request.GET.get('username').lower()
        exists = Usernames.objects.filter(name=username).exists()
        if exists:
            data['msg'] = username + ' already exists.'
        else:
            data['msg'] = username + ' does not exists.'
    return JsonResponse(data)

Render_to_response , das veraltet ist und anstelle von HttpResponse durch render und ab Django 1.7 ersetzt wurde, verwenden wir JsonResponse für die Ajax-Antwort. Da er mit einem JSON-Encoder geliefert wird, müssen Sie die Daten nicht serialisieren, bevor Sie das Antwortobjekt zurückgeben. HttpResponse wird jedoch nicht veraltet.