Saltar al contenido

Cómo trabajar con AJAX en Django

Para enviar el formulario, necesitamos hacer una solicitud POST al servidor con todos los valores del formulario rellenados por el usuario.

1. Creando formas

Vamos a crear la forma Django heredando la ModelForm. En la Forma Amistosa, he cambiado el campo dob y he habilitado un widget de DateField con algunos cambios en los años. Y también tened en cuenta que en el método __init__, he actualizado un atributo de clase HTML con control de formulario a cada campo del formulario para que Bootstrap se habilite en todos los campos.

Cómo trabajar con AJAX en Django
Cómo trabajar con AJAX en Django

Finalmente, en la subclase Meta, he incluido la clase modal y los campos que es probable que se muestren.

Tengan en cuenta que he creado un nuevo archivo llamado forms.py en mi carpeta de aplicaciones.

forms.py

123456789101112131415161718192021222324from.models import Friendfrom django import formsimport datetimeclassFriendForm(forms.ModelForm):## cambiar el widget del campo de fecha. dob = forms.DateField( label=$0027What is your birth date?$0027,# cambiar el rango de los años desde 1980 al año actual - 5 widget=forms.SelectDateWidget(years=range(1980, datetime. date.today().year-5)))def__init__(self,*args,**kwargs):super(FriendForm, self).__init__(*args,**kwargs)## añadir una clase de "control de forma" a cada entrada de forma## para habilitar bootstrapfor name en self. fields.keys(): self.fields[name].widget.attrs.update({$0027class$0027:$0027form-control$0027,})classMeta: model = Friend fields =("__all__")

pitón

2. Creando vistas

Después de crear el formulario, importemos FriendForm en las vistas. Hay dos vistas que necesitan ser discutidas en esta sección, y son indexView y postFriend.

  • indexView crea el objeto FriendForm, toma todos los objetos amigos de la base de datos, y los envía a la plantilla index.html, de la que hablaremos más adelante.
  • postFriend es la vista AJAX POST, que se encarga de la solicitud POST. Notarán que es similar a una vista normal, pero con algunos cambios, como JsonResponse y serializar. Hemos usado estos métodos porque es una vista AJAX, así que sólo tenemos que tratar con JSON.

views.py

12345678910111213141516171819202122232425262728de django.http import JsonResponsefrom django.core import serializersfrom.forms import FriendFormfrom.models import FrienddefindexView(request): form = FriendForm() friends = Friend.objects. all()return render(request, "index.html",{"form": form, "friends": friends})defpostFriend(request):# la solicitud debe ser ajax y el método debe ser POST.if request.is_ajax y request.method =="POST":# obtener los datos de la forma form = FriendForm(request. POST)# guarda los datos y después de recuperar el objeto en instanceif form.is_valid(): instance = form.save()# serializa en nuevo objeto amigo en json ser_instance = serializers.serialize($0027json$0027,[ instance,])# envía al lado del cliente. return JsonResponse({"instance": ser_instance}, status=200)else:# se han producido algunos errores de forma.return JsonResponse({"error": form.errors}, status=400)# se han producido algunos errores return JsonResponse({"error":""}, status=400)

pitón

3. Creando URLs

Para las vistas anteriores, vamos a crear una ruta URL para cada vista. Fíjate en el nombre que se le da a la ruta postFriend, que se utilizará en la plantilla que se discute más adelante en esta guía.

urls.py

123456789101112de django.urls import pathfrom my_app.views import( indexView, postFriend,)urlpatterns =[# ... other urls path($0027$0027, indexView), path($0027post/ajax/friend$0027, postFriend, name ="post_friend"),# ...]

pitón

4. Creación de plantillas

Ahora que has creado la parte trasera, vamos a pasar a la parte delantera de esta guía.

En el index.html, primero extenderemos nuestra base.html, que se discute anteriormente en esta guía. Además, escribirá el contenido entre los bloques.

La plantilla se divide en dos partes. La primera parte muestra la forma, y la segunda muestra los objetos amigos almacenados anteriormente en la tabla.

index.html

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748{%extends "base.html"%}{%blockcontent%}<div label}}</label};{{{field}}</div.;{%endfor%}<inputtype="submit "value="Create Friend"/;/div.;/form; nombre</th... apellido</th..; vive en</thm;/trtrabajo&thead&tbody& {%forfriendinfriends%}<tr&tr&td;td;; {{i1}amigo. nick_name}}</td²;td²;{{friend.first_name}}</td²;td²;{{{friend.last_name}}</td²;td²;{{friend.likes}}</td²;td²;{{friend. dob|date: "Y-m-d"}}</td;td;{{friend.lives_in}}</td;};{%endfor%}</body
django

Ahora pasemos a la parte de JavaScript de esta guía.

Al enviar el formulario, serialice los datos del mismo y cree una solicitud AJAX POST, y luego envíela al servidor.

Si la solicitud es satisfactoria, añada la fila a la mesa.

Nota: hemos utilizado la URL venerada, que se discute en la sección urls.py. Esto te ayuda a no escribir la ruta de la URL de una manera codificada.

Puedes colocar esta etiqueta URL inversa en el atributo HTML y luego recuperar el atributo. Así que pon este código JavaScript en el archivo js.

index.html

12345678910111213141516171819202122232425262728293031323334353637383940414243444546{%blockjavascript%}<script>/* Al enviar el formulario, enviar la solicitud POST ajax al servidor y después de la presentación exitosa mostrar el objeto. */$("#friend-form").submit(function(e){/// prevenir de la recarga de la página y acciones por defecto e.preventDefault();// serializar los datos para enviar el formulario data.var serializedData =$(this).serialize();// hacer POST ajax call $. ajax({ type:$0027POST$0027, url:"{%url$0027post_friend$0027%}", data: serializedData,success:function(response){/// on successfull creating object// 1. clear the form.$("#friend-form").trigger($0027reset$0027);// 2. focus to nickname input $("#id_nick_name").focus();// display the newly friend to table.var instance =JSON. parse(response["instance"]);var fields = instance[0]["fields"];$("#mi_amigo tbody"). prepend(``<tr> <td;${fields["nick_name"]||""}</td;};${fields["first_name"]||""}</td;};${fields["last_name"]|""}< ${fields["le gusta"]||||""}</td; ${fields["dob"]|||""}</tdtd; ${fields["le gusta"]|||""}</td; ${fields["vive_en"]|""}</td; </tr;``)}, error: function(response){/// alertan el error si ocurre algún error alert(response["responseJSON"]["error"]);}})})};/script;{%endblockjavascript%}

django