Django AJAX Tutorial 🔥: Basic AJAX in Django app | Django casts #1

El propósito de este video es
demostrar cómo enviar solicitudes básicas GET y POST de Ajax desde un navegador y cómo
manejar los datos en el lado de Django. Así que aquí tengo un proyecto Django muy simplificado
: solo tiene un patrón de URL que dice que todas las solicitudes a la dirección /demo/
serán manejadas por AjaxHandlerView. Y AjaxHandlerView
simplemente muestra a un usuario la plantilla index.html como respuesta a su
solicitud de obtención. A su vez, la plantilla index.html amplía la plantilla HTML base.
Y hay dos columnas: la columna izquierda y la columna derecha.

La columna de la izquierda tiene
un solo botón… este botón y una lista desordenada con la ID de los segundos. Y la
columna de la derecha solo tiene una lista desordenada con la identificación correcta. En la plantilla HTML base,
adjunté una biblioteca JQuery y mi archivo javascript personalizado que usaré para
realizar solicitudes Ajax. Así que nada extraordinario aquí: una aplicación Django muy básica y muy
simple. Ahora digamos que se debe enviar una solicitud AJAX
al servidor cuando un usuario hace clic en este botón verde y estoy abriendo mi archivo main.js,
y aquí, en primer lugar, tengo que configurar el controlador de clics en el botón. Y para
identificar el elemento del botón… quiero usar la clase CSS, digamos que será la
clase 'btn'.

Estoy llamando a su método .click() que llamará a la
función. Y aquí estoy llamando a la función Ajax que obtiene un diccionario como
argumento y, en este ejemplo, las claves del diccionario son las siguientes: 1) la
clave URL: es la URL a la que enviar la solicitud. Usaré este localhost:8000/demo/ url como lo especifiqué en el archivo urls.py. Luego, el siguiente: 2) el tipo: es el tipo
del método HTTP. Usaré el método GET, porque quiero obtener o
leer información del servidor. Luego, 3) los datos y los datos son el diccionario con los
datos que quiero enviar al servidor. Por ejemplo quiero enviar al servidor el
texto de mi botón… este texto. Entonces, la clave será button_text y estoy obteniendo el
elemento de botón con la palabra clave 'this'. La palabra clave 'Esta' ya se refiere al
elemento de botón con la clase CSS 'btn'. Y estoy llamando a su método .text() para obtener el texto del
botón y también quiero usar 4) la clave de éxito.

Y el éxito es lo que
sucederá cuando el servidor responda con éxito. Si el servidor responde
con éxito, es decir, con el código de estado 200, quiero cambiar el texto del botón
a lo que me devolverá el servidor. Así que será una función que toma como
argumento una respuesta de la vista de Django… es un objeto JSON… Entonces obtengo
el mismo botón con la clase CSS 'btn'. Luego vuelvo a llamar a su método .text()
y ahora quiero pasarle un nuevo valor… digamos que será el valor
de la tecla 'segundos' del objeto de respuesta response.seconds
y eso es todo con la parte de JavaScript por ahora… ¿Y qué hará Django? Como
sabe, todos los parámetros de las solicitudes GET se almacenan en el objeto de solicitud…

Para estar
exactamente en su diccionario GET. Y el objeto de solicitud cualquier vista de Django acepta
como argumento requerido. Así que vamos a obtener el texto del botón. Estoy creando una
nueva variable: la variable de texto que es igual al objeto de solicitud… el diccionario GET y estoy llamando a
su método .get() para obtener el valor de la clave… y en mi archivo JavaScript
usé tecla 'button_text'… imprimamos una cadena vacía… y texto y otra vez una
cadena vacía…

Probemos… F5… haga clic y podemos ver 'GET' y 'GET' – el texto
del botón… Ok y obtuvimos los datos del front-end.
Y ahora quiero enviar al front-end algunos datos de mi servidor, desde la
vista de Django y quería enviar al front-end el tiempo en segundos. Se
llama tiempo de 'época' o tiempo UNIX: la época o tiempo UNIX es el tiempo transcurrido
desde el 1 de enero de 1970 en segundos. Y para usarlo quiero
importar desde el módulo de tiempo la función time() vamos a conseguirlo… la variable 't' es igual a… y estoy
llamando a la función time(). Y mi respuesta al lado del cliente debe ser un
objeto JSON serializable con ciertos encabezados y la forma más fácil de hacer tal
respuesta es usar la clase JsonResponse. Y tengo que importarlo primero… y
el método .get() de mi vista devolverá una instancia de la clase JsonResponse… con
un diccionario con la tecla 'segundos'. Los 'segundos' de la clave y su valor serán la variable 't'
.

Y también el parámetro de estado será 200.
Vamos a probarlo… F5… y podemos ver que el botón desapareció y obtuvimos el
objeto JSON y la vista regresó. Y para arreglarlo… en la vista tengo que verificar
si la solicitud fue una solicitud AJAX o no. Puedo hacerlo con el método request.is_ajax()… y si es True, la vista devuelve el
objeto JsonResponse; de ​​lo contrario, el método .get() simplemente devolverá el resultado de la función render()
y lo representaremos un usuario el archivo index.html. Como vimos, el
navegador obtiene el objeto JSON y podemos usarlo con la plantilla index.html. Y
para usarlo en mi plantilla en mi archivo JS en la función de éxito, puedo usar esta
construcción para cambiar el texto de mi botón y también puedo usar otra cosa…

Quiero
obtener una lista desordenada con el ID de 'segundos'
I' estoy llamando a su método .append() y quiero agregar un elemento de lista… … con la cantidad de
segundos… Ok… probémoslo… F5… Tengo el verde botón y podemos ver el
tiempo de época en el texto del botón y con las tarjetas de Bootstrap… Bien, funciona:
obtuvimos la solicitud AJAX GET y podemos manejarla en nuestra vista. El siguiente en la línea
es la solicitud POST…

Tengo una lista de estas tarjetas con segundos y quiero
enviar una solicitud POST a Django haciendo clic en una tarjeta… en esta tarjeta, por ejemplo… o en
esta tarjeta, por ejemplo. Y quiero empezar con mi JavaScript. Y aquí la
lógica es absolutamente la misma. En primer lugar, tengo que definir el controlador onclick
y la idea principal de este paso es usar el mecanismo de delegación para manejar los clics
en tarjetas específicas.

Entonces, en primer lugar, obtengo el contenedor principal de estas
tarjetas… es la etiqueta de lista desordenada UL con el ID de 'segundos', luego invoco su método .on() y, como
primer argumento, defino el evento que necesito manejar… ese será el
evento Click… El segundo argumento… aquí necesito definir un elemento descendiente de la
etiqueta UL en el que quiero procesar el evento click. Será su elemento de elemento de la lista secundaria
, y luego lo que debería suceder cuando se produzca el clic…

Esa será la
función y nuevamente estoy llamando a la función ajax() casi con los mismos parámetros ' tipo' esta vez será 'publicar '… 'datos'… cualquier
dato que desee en realidad… Quiero usar la tecla 'texto' con 'esto'… 'esta' palabra clave se refiere
a un elemento específico de un elemento de lista y obtengo su texto… y la clave de 'éxito'
que será una función, que obtendrá una respuesta de mi vista de Django. Y aquí
quiero agregar la lista desordenada correcta con algo de contenido nuevo… Así que obtengo
el contenedor con la ID 'correcta' y nuevamente llamo a su método .append()… y
lo estoy agregando con algunos datos de la vista de Django y ahora del lado del servidor esta vez necesito
aquí el método .post() y todos los parámetros de las solicitudes POST se almacenan en el
objeto de solicitud en su diccionario POST. Entonces, quiero obtener el texto de la tarjeta, así que
llamo al objeto de solicitud…

Su diccionario POST.
Llamo a su método .get() y quiero obtener la clave de 'texto', el valor de la clave de 'texto'
. Y luego quiero hacer algo con esos datos… digamos que la variable 'texto'
se insertará en la cadena F, la cadena F que tengo y aquí
quiero usar la variable 'card_text' y luego Estoy devolviendo una instancia de la
clase JsonResponse… la clave de 'datos'… y la variable de resultado como valor. Y el estado
será 200… Si intentamos realizar la solicitud POST ahora… no pasará nada…
F5… no pasará nada porque tenemos la excepción prohibida 403.

Porque falta el token CSRF
o es incorrecto… Los tokens CSRF son obligatorios para
realizar solicitudes POST y la forma más sencilla de obtenerlo es usar el
filtro csrf_token de Django en el archivo HTML. Entonces, dentro de index.html… en algún lugar aquí… Estoy
usando csrf_token, su protección contra falsificación de solicitudes entre sitios
. Y ahora necesito obtenerlo… en JavaScript puedo obtenerlo de la
siguiente manera… Estoy creando una nueva variable – 'csrf' que es igual a… y ahora necesito obtener… F5 … y necesito obtener un campo de entrada… con
el nombre 'csrfmiddlewaretoken' es una entrada… el nombre es igual a… este valor y…
estoy llamando a su método .val(). Y luego en la solicitud POST en el
diccionario de datos… Estoy usando el nombre de este token como clave del
diccionario de datos… y el valor de esa clave será la variable csrf.
Vamos a probarlo de nuevo… F5… y tenemos el resultado de la vista de Django… En breve,
eso es todo con los conceptos básicos de las solicitudes AJAX POST y GET.
Si te gustó el video,
dale manita arriba y suscríbete al canal.

¡
Gracias por ver!.

As found on YouTube

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *