Iniciar sesión

(/login.html) Inscribirse
(/) (/search) (/submit.html)
(https://signup.steemit.com)

Cómo enviar solicitudes AJAX en

Django
kit.andres (65) (/@kit.andres)en #utopian-io (/trending/utopian-io) •
hace 2 años (edited)

Intro: English
Title: How to send AJAX requests in Django
Language: Spanish / Español

In this tutorial we will see how to make an AJAX request in Django ,

making a POST request to the application and running a speci c task
to send a response to the client, all this, without having to reload the
page.

AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo

web con la que podemos brindar una mejor experiencia a los usuarios de
nuestros sitios web y una navegación más ágil y funcional debido a que
permite ejecutar tareas de forma asíncrona, es decir, que no inter eren
con el funcionamiento del sitio web, ya que corren en segundo plano. Así,
podemos establecer una comunicación directa entre el cliente (Navegador
del usuario) y un servidor para consultar o cargar datos sin necesidad de
recargar la página, actulizando solo una parte de esta mediante el uso de
Javascript.

En este tutorial vamos a ver como realizar una solicitud AJAX en Django ,
haciendo una solicitud POST a nuestra aplicación y corriendo una tarea
especí ca para posteriormente, enviar una respuesta al cliente, todo esto,
sin necesidad de recargar la página.
/
Para el caso práctico de este tutorial, crearemos un formulario típico de
contacto de una página web con los campos nombre, correo electrónico y
mensaje, y ejecutaremos la acción submit de este formulario mediante el
uso de AJAX. En el tutorial Cómo crear un formulario en Django
(https://steemit.com/utopian-io/@kit.andres/como-crear-un-formulario-
en-django-utilizando-la-libreria-django-widget-tweaks) estudiamos los
pasos para crear un formulario y manipular los datos ingresados por el
usuario, y en el tutorial cómo enviar correos electrónicos en Django
(https://steemit.com/utopian-io/@kit.andres/como-enviar-correos-
electronicos-en-django-implementacion-de-formulario-de-contacto)
creamos un mensaje de correo electrónico con estos datos y lo enviamos a
una dirección de correo electrónico predetermianda.

Tras terminar el desarrollo de estos dos tutoriales previos, tenemos una

aplicación web con un formulario básico qué al ser diligenciado, envía una
solicitud POST a nuestra aplicación Django, ejecuta el envío del correo
electrónico y recarga la página. En este tutorial adecuaremos este
formulario para que la solicitud POST se realice via AJAX, así,
ejecutaremos el envío del correo electrónico, pero la página no será
recargada una vez terminada esta tarea.

Tutoriales previos recomendados:

1. Con guración inicial de mi propio proyecto Django usando el

repositorio django_base (https://steemit.com/utopian-
io/@kit.andres/con guracion-inicial-de-mi-propio-proyecto-django-
usando-el-repositorio-djangobase)
2. Cómo crear un formulario en Django utilizando la librería django-
widget-tweaks (https://steemit.com/utopian-io/@kit.andres/como-
crear-un-formulario-en-django-utilizando-la-libreria-django-widget-
tweaks)
3. Cómo enviar correos electrónicos en Django - Implementación de
formulario de contacto (https://steemit.com/utopian-
io/@kit.andres/como-enviar-correos-electronicos-en-django-
implementacion-de-formulario-de-contacto) /
Cómo punto de partida, tomaremos entonces nuestro formulario
previamente (https://steemit.com/utopian-io/@kit.andres/como-enviar-
correos-electronicos-en-django-implementacion-de-formulario-de-
contacto) creado:

app/views.py
app/templates/home.html
app/templates/email_content.html

1. Capturar evento submit del formulario utiliando

Javascript

/
Actualmente, cuando un usuario hace submit del formulario, se crea una
solicitud post al servidor que recarga la página. Para evitar esto, lo primero
que debemos hacer es capturar la acción submit del formulario para
decidir nosotros mismos mediante el uso de JQuery que es lo que
queremos que suceda.

El contenido del archivo *app/templates/home* es el siguiente:

Código fuente

/
Agregamos un id a la etiqueta <form> ; en este caso voy a usar
id_contact_form, y escribimos el boque Javascript {% block js %} al nal
de este archivo.

app/templates/home.html

Código fuente

Cómo podemos ver, mediante el uso de JQuery estamos capturando el

evento submit del formulario. Si si hacemos post del formulario, veremos
el mensaje SUBMITED en un cuadro de alerta. La linea return false;
previene la acción que por defecto se realizaría tras hacer submit del
formulario, que es enviar una solicitud al servidor y recargar la página.

/
2. Definir la url a la que enviaremos la solicitud POST
Actualmente, la solicutud post se está enviando a la url localhost:8000, que
representa la página de inicio de nuestra aplicación y cuya vista se
encentra de nida en el archivo app/views.py de la siguiente forma:

app/views.py

/
 Código fuente

en el archivo app/urls.py, se encuentra de nida la url home de la siguiente

forma:

/
app/urls.py

Código fuente

Agregaremos esta url como atributo data al tag <form> en nuestro archivo
app/templates/home.html. Llamaré este atrubuto data-post-url :

app/templates/home.html

/
 Código fuente

3. Ejecutar solicitud POST del formulario mediante

AJAX
Editamos nuestro código Javascript de la siguiente forma:

app/templates/home.html

/
 Código fuente

Como podemos ver, estamos almacenando la url a la que de nimos que

vamos a enviar la solicitud post en la variable post_url . Ahora, vamos usar
la función .ajax de JQuery de la siguiente manera:

app/templates/home.html

/
 Código fuente

Cómo podemos ver, mediante el uso de JQuery, estamos haciendo una

solicitud POST a la url que de nimos previamente. En la variable formData
estamos almacenando un diccionario con los datos ingresados por el
usuario en el formulario. En el caso en que la respuesta del servidor al que
estamos haciendo la solicitud POST tenga un status_code igual a 200, se
ejecutará el código de nido en el parametro success . Por ahora, estamos
imprimiendo mediante el comando console.log() la respuesta retornada
por el servidor. Ahora, vamos a de nir esa respuesta en nuestro archivo
app/views.py, en la vista HomeView .
/
4. Definir respuesta del servidor a la solicitud POST
Tras el paso anterior ya estamos haciendo la solicutud POST usando AJAX
a la url localhost:8000. Ahora falta de nir la respuesta que se enviará
desde la vista HomeView al cliente (Navegador).

Actualmente, nuestra vista HomeView está de nida así:

app/views.py

/
 Código fuente

Como podemos ver, la respuesta que se está enviando desde la vista es

redirect('home') . Esto quiere decir que estamos redirigiendo a nuestros
usuarios a la url localhost:8000 tras hacer sumbit del formulario. El uso de
la función redirect acasiona que se recargue la página, pero como ahora
estamos realizando la solicitud POST usando AJAX, lo que haremos será
enviar una respuesta en formato JSON. Para de nir la respuesta en
formato JSON vamos a usar la clase de Django JsonResponse que nos
permite crear una respuesta codi cada en formato JSON. Esta clase
debemos importarla de la siguiente forma:

from django.http import JsonResponse

app/views.py

/
 Código fuente

5. Manipular respuesta del servidor en el código

Javascript
/
Ahora que estamos obenitendo una respuesta en formato JSON por parte
del servidor a nuestra asolicitud AJAX, podemos manipular los datos
retornados para mostrar al usuario un mensaje de con rmación de que su
mensaje ha sido enviado correctamente. En la vista HomeView estamos
retornando una variable JSON con la siguiente estructura:

Esta respuesta la estamos obteniendo en el método success de nuestra

solicitud AJAX en el código Javascript mediante la variable response .
En nuestro código Javascript, vamos a obtener el mensaje retornado de la
siguiente forma:

var message = response.content.message

/
 Código fuente

Agregamos la linea alert(message); para mostrar al usuario el mensaje

retornado desde el servidor; así, cuando un usuario haga sumbit del
formulario, su mensaje va a ser enviado a un correo electrónico
predeterminado, y se le mostrará un cuadro de dialogo con el mensaje "Su
mensaje ha sido enviado correctamente", todo, sin recargar la página.

/
Y esto es todo!!! De esta forma se envía una solicitud POST usando AJAX en
Django. Con este se termina una serie de tutoriales (crear un formulario
en Django (https://steemit.com/utopian-io/@kit.andres/como-crear-un-
formulario-en-django-utilizando-la-libreria-django-widget-tweaks), envío
de correos electrónicos en Django (https://steemit.com/utopian-
io/@kit.andres/como-enviar-correos-electronicos-en-django-
implementacion-de-formulario-de-contacto) y este) que desarrollados uno
tras otro nos permiten crear un formulario y hacer submit de este
mediante el uso de AJAX, enviando una solicitud asíncorina al servidor y
retornando a nuestros usuarios una respuesta sin necesidad de que la
página sea recargada. Seguiré compartiendo mis experiencias con Django,
fantástico framework web escrito en Python.

/
 Felices días ✌

Posted on Utopian.io - Rewarding Open Source Contributors

#spanish (/trending/spanish) #opensource (/trending/opensource)

#django (/trending/django) #javascript (/trending/javascript)

hace 2 años en #utopian-io (/trending/utopian-io) por Respuesta 7

kit.andres (65) (/@kit.andres) (/utopian-io/@kit.andres/como-

$15.85 8 votos enviar-solicitudes-ajax-en-

django)

Clase de órden:  Trending

lukaluci (51) (/@lukaluci) hace 2 años (/utopian-io/@lukaluci/re-kitandres-como-enviar-solicitudes- [-]

ajax-en-django-20180111t032323844z#@lukaluci/re-kitandres-como-enviar-solicitudes-ajax-en-django-
20180111t032323844z) 
I'm sorry, I don't understand your language. Btw, my upvote doesn't worth anything 'cuz I'm a newbie here, but
I'm posting this comment as a support. If you want, you can check my introduction post and leave me some
feedback. And yeah, I'm 17 :) PEACE!
$0.05 1 voto Respuesta

kit.andres (65) (/@kit.andres) hace 2 años (/utopian-io/@lukaluci/re-kitandres-como- [-]

enviar-solicitudes-ajax-en-django-20180111t032323844z#@kit.andres/re-lukaluci-re-kitandres-
como-enviar-solicitudes-ajax-en-django-20180111t033523752z) (edited)
Welcome and good luck.
$0.00 Respuesta

lukaluci (51) (/@lukaluci) hace 2 años (/utopian-io/@lukaluci/re-kitandres-como- [ - ]

enviar-solicitudes-ajax-en-django-20180111t032323844z#@lukaluci/re-kitandres-re-
lukaluci-re-kitandres-como-enviar-solicitudes-ajax-en-django-20180111t220325326z) 
Thanks! Also thanks for visiting my profile ;)
$0.00 Respuesta

/
isfar (63) (/@isfar) hace 2 años (/utopian-io/@isfar/re-kitandres-como-enviar-solicitudes-ajax-en- [-]
django-20180111t105322193z#@isfar/re-kitandres-como-enviar-solicitudes-ajax-en-django-
20180111t105322193z) 
Thank you for the contribution. It has been approved.

You can contact us on Discord .

[utopian-moderator]
$0.04 1 voto Respuesta

utopian-io (71) (/@utopian-io) hace 2 años (/utopian-io/@utopian-io/re-kitandres-como-enviar- [-]

solicitudes-ajax-en-django-20180112t133936646z#@utopian-io/re-kitandres-como-enviar-solicitudes-ajax-en-
django-20180112t133936646z) 

Hey @kit.andres (/@kit.andres) I am @utopian-io (/@utopian-io). I have just upvoted you!

Achievements
You have less than 500 followers. Just gave you a gi to help you succeed!
Seems like you contribute quite o en. AMAZING!

Suggestions
Contribute more o en to get higher and higher rewards. I wish to see you o en!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly
based on that. Good luck!

Get Noticed!
Did you know project owners can manually vote with their own voting power or by voting power delegated
to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord . Lets GROW TOGETHER!

Vote for my Witness With SteemConnect

Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses (https://steemit.com/~witnesses)

/
(https://steemit.com/~witnesses)

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat?
Join me on Discord https://discord.gg/Pc8HG9x
$0.04 1 voto Respuesta

igor125v (38) (/@igor125v) hace 2 años (/utopian-io/@igor125v/re-kitandres-como-enviar-solicitudes- [ - ]

ajax-en-django-20180111t044442458z#@igor125v/re-kitandres-como-enviar-solicitudes-ajax-en-django-
20180111t044442458z) 
Great article! :D I'm sorry, my SP is less than $0.01 so my upvote won't mean anything for you. And yeah, I am
new in steemit so if you want, you can go and check my profile. :D
$0.00 Respuesta

transilvaniaman (25) (/@transilvaniaman) hace 2 años (/utopian-io/@transilvaniaman/re-kitandres- [-]

como-enviar-solicitudes-ajax-en-django-20180111t112918322z#@transilvaniaman/re-kitandres-como-enviar-
solicitudes-ajax-en-django-20180111t112918322z) 
Can helpme
$0.00 Respuesta