10

En mi código tengo dos peticiones ajax anidadas. La idea es que al dar enter sobre el input con id placa se envíe el valor digitado primero a la vista ajax1, haga unas operaciones y luego pase a la vista ajax2 y retorne unos resultados.

Se supondría que al pasar a la segunda petición ajax que se encuentra dentro de la otra, debería imprimirse {'ajax2': true} pero no es así, se esta imprimiendo {'ajax1': true}

¿Qué estoy haciendo mal?

views.py

from django.http import JsonResponse

def ajax1(request):
    if request.method == "POST":
        if request.is_ajax():
            return JsonResponse({"ajax1": True})

def ajax2(request):
    if request.method == "POST":
        if request.is_ajax():
            return JsonResponse({"ajax2": True})

Peticiones ajax

// Función para obtener el token CSRF
function getCookie(name) {
         var cookieValue = null;
         if (document.cookie && document.cookie != '') {
               var cookies = document.cookie.split(';');
         for (var i = 0; i < cookies.length; i++) {
              var cookie = jQuery.trim(cookies[i]);
         if (cookie.substring(0, name.length + 1) == (name + '=')) {
           cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
             break;
            }
         }
     }
return cookieValue;
}

$("#input").keypress(function(e) {

  if(e.which == 13) {
      e.preventDefault();

        var csrftoken = getCookie('csrftoken');

        var placa = $(this).val();

        $.ajax({
              url : window.location.href + "ajax1/",
              type : "POST", 
              data : { csrfmiddlewaretoken : csrftoken,
                       placa : placa,
                    }, 
              success : function(json) {
                  $.ajax({
                    url : window.location.href + "ajax2/",
                    type : "POST",
                    data :  { csrfmiddlewaretoken : csrftoken,
                             placa : placa,
                          },
                    success: function(data2){
                      console.log(data2); // Debería imprimir {ajax2: true}
                    },
                    error : function(xhr,errmsg,err) {
                      console.log(xhr.status + ": " + xhr.responseText);
                    }
                  });
                },

              error : function(xhr,errmsg,err) {
                console.log(xhr.status + ": " + xhr.responseText);
              }
            });
          } 

      }); 
3
  • A mí me funciona el código cuando lo ejecuto en mi máquina (con modificaciones mínimas para que llame a servicios locales)
    – Alvaro Montoro
    Commented el 2 feb. 2016 a las 22:03
  • @JavierCárdenas, en chrome en la sección "Network" el llamado a /ajax2/ que te da como response? Commented el 2 feb. 2016 a las 23:40
  • El error estaba en que una de las url estaba apuntando a la vista incorrecta; sin embargo, me sirvió bastante la respuesta de @fredyfx porque me parece una forma mucho más sencilla y elegante. Commented el 2 feb. 2016 a las 23:51

1 respuesta 1

13

Te recomiendo utilizar las promesas de JavaScript (JavaScript Promises), aqui hay documentación detallada, ya que aseguran que al completar una petición pueda seguir a otra, tal y como lo que estas buscando.

$('#input').keypress(function(e)
  {
        if(e.which == 13) {
  e.preventDefault();

    var csrftoken = getCookie('csrftoken');

    var placa = $(this).val();
    
    var promise = $.ajax({
          url : window.location.href + "ajax1/",
          type : "POST", 
          data : { csrfmiddlewaretoken : csrftoken,
                   placa : placa,
                }, 
          success : function(json) {
              
              //Almacena el resultado en algun lado
  
            },

          error : function(xhr,errmsg,err) {
            console.log(xhr.status + ": " + xhr.responseText);
          }
        });
        promise.then(function(){
            //
                    $.ajax({
                url : window.location.href + "ajax2/",
                type : "POST",
                data :  { csrfmiddlewaretoken : csrftoken,
                         placa : placa,
                      },
                success: function(data2){
                  console.log(data2); // Debería imprimir {ajax2: true}
                },
                error : function(xhr,errmsg,err) {
                  console.log(xhr.status + ": " + xhr.responseText);
                }
              });
        //
        });            
      } 
  });

Espero te sea de utilidad, éxitos en el desarrollo, bendiciones!

Fredy.

2
  • Lo probaré, pero si me interesa entender que estoy haciendo mal en mi código actual. Commented el 20 ene. 2016 a las 1:33
  • 1
    Muchas gracias, me sirvió mucho... Commented el 11 may. 2020 a las 3:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.