Ajax en Django con Jquery

  
14 de Septiembre de 2015   1  

En esta ocasión traemos un pequeño tutorial de cómo podemos realizar peticiones con AJAX JQUERY de manera transparente sin morir en el intento. Recordemos que para realizar algunas solicitudes en django como el POST es requerido enviar el token conocido como el CSRFTOKEN que por lo general mandamos en nuestras peticiones POST por medio de los formularios de html.

Cuando comencé a desarrollar con Django hace unos años, me topé con la necesidad de consultar información de forma asíncrona utilizando AJAX con Jquery y dentro del intento me topé con el poblema de que el token de autenticación era necesario para dichas peticiones POST, investigando me topé con la documentación oficial que recomendaba tomar el valor de la cookie csrftoken que vive en las sesiones django para poder resolver dicho problema. Pum! en efecto este problemilla se resolvió gracias a que ahora enviaba en mis peticiones la variable "X-CSRFToken"  dentro de la cabecera.  

Entonces, me veía mandando esta variable cada vez que hacia una petición $.ajax en jquery en la sección beforeSend. Eso no era sano ya que en cada funcion Ajax tenía que integrarlo. Lo que hice es hacer un script en javascript qu me permitía utilizar AJAX sin tener que preocuparme del token de autenticación que solicita Django. Hoy les comparto este script que te ahorrará muchas horas de lectura y de comprensión ya que todo el código está debidamente comentado y lo único que tienes que hacer es lo siguiente:

 

  1. Descargar el archivo DjangoAjax.js que se encuentra en mi Github.
  2. Integrarlo en alguna carpeta static de tu proyecto
  3. Hacer referencia al script en tu plantilla html de la siguiente manera: <script src="mi_ruta/DjangoAjax.js"></script>​
  4. Listo! Ahora puedes hacer tus peticiones sin tener que preocuparte en el token :)

 

El código de DjangoAjax.js es el siguiente:

 

Como pueden observar en resumen lo que realiza este script es configurar las peticiones AJAX de jquery para que en cada una se le agregue en la cabecera la variable  X-CSRFToken  con el valor del token de forma automática para que tengamos peticiones exitosas.

 

Un ejemplo de consulta de WebServices con ajax sería:

$.ajax({
    url: 'mi_url',
    type: "POST",
    data: {'variable': value},
    success: function (response) {
       //lo que haces si es exitoso
    }

});

 

Espero les haya gustado, y que lo puedan implementar en sus proyectos con JQUERY y DJANGO.

 



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados