Skip to main content

PodriasPodrías utilizar ajaxAJAX para realizar la solicitud a tu backend, obtener el mensaje y despuesdespués, con una funcion js pintarlfunción JS, pintar el DOM del navegador.

//UsareUsaré como backend una apiAPI libre de prueba, tu deberiasdeberías poner tu urlURL de djangoDjango
//Haz click en EJECUTAR o Copia todo el HTML guardalo como ejemplo.html y ejecutaloejecútalo en tu navegador para verlo
<!DOCTYPE html>
<html>
<head>

  <title>Ejemplo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //enEn host_backend debes poner tu funcionfunción Django
    var host_backend = "https://jsonplaceholder.typicode.com/albums/"; 
    
    async function obt_Mensaje() {      
        return await $.ajax({
          type: "GET",
          url: host_backend+String(count),
          success: function(msg) {            
            return msg;
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                return false;
          },
      });
    }

    function pintar_Mensaje() {
        //Reinicio el contador para que evitarevite errores al consultar un id que no exista
        if(count == 20) count = 0;
        
        count = count +1;
        
        obt_Mensaje()
        .then(msg =>{
          //Se Obtuvoobtuvo el msg correctamente.
          //Lo pintamos en el DOM 
          //En este caso particular, ya que eso depende de la apiAPI a la que consulto, obtengo title"title" como Mensaje
          $("#mensaje").text(msg['title']);

        })
        .catch(err =>{
          //No se pudo Obtener el Mensaje
          console.log(err); //Esto hace que se imprima el error en la consola del navegador
        })
    }
    //Este contador es para consultar un dato diferente
    var count = 0;
    //AquiAquí ejecutara la funcionfunción cada 1200 milisegundos
    var actualizar_msg = window.setInterval(function() { pintar_Mensaje() }, 1200);
  </script>
</head>
<body>

<h1 id="mensaje"></h1>

</body>
</html>

En tu funcionfunción Django, devuelve el mensaje como un JSON.

Podrias utilizar ajax para realizar la solicitud a tu backend obtener el mensaje y despues con una funcion js pintarl el DOM del navegador.

//Usare como backend una api libre de prueba, tu deberias poner tu url de django
//Haz click en EJECUTAR o Copia todo el HTML guardalo como ejemplo.html y ejecutalo en tu navegador para verlo
<!DOCTYPE html>
<html>
<head>

  <title>Ejemplo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //en host_backend debes poner tu funcion Django
    var host_backend = "https://jsonplaceholder.typicode.com/albums/"; 
    
    async function obt_Mensaje() {      
        return await $.ajax({
          type: "GET",
          url: host_backend+String(count),
          success: function(msg) {            
            return msg;
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                return false;
          },
      });
    }

    function pintar_Mensaje() {
        //Reinicio el contador para que evitar errores al consultar un id que no exista
        if(count == 20) count = 0;
        
        count = count +1;
        
        obt_Mensaje()
        .then(msg =>{
          //Se Obtuvo el msg correctamente.
          //Lo pintamos en el DOM 
          //En este caso particular, ya que eso depende de la api a la que consulto, obtengo title como Mensaje
          $("#mensaje").text(msg['title']);

        })
        .catch(err =>{
          //No se pudo Obtener el Mensaje
          console.log(err); //Esto hace que se imprima el error en la consola del navegador
        })
    }
    //Este contador es para consultar un dato diferente
    var count = 0;
    //Aqui ejecutara la funcion cada 1200 milisegundos
    var actualizar_msg = window.setInterval(function() { pintar_Mensaje() }, 1200);
  </script>
</head>
<body>

<h1 id="mensaje"></h1>

</body>
</html>

En tu funcion Django, devuelve el mensaje como un JSON.

Podrías utilizar AJAX para realizar la solicitud a tu backend, obtener el mensaje y después, con una función JS, pintar el DOM del navegador.

//Usaré como backend una API libre de prueba, tu deberías poner tu URL de Django
//Haz click en EJECUTAR o Copia todo el HTML guardalo como ejemplo.html y ejecútalo en tu navegador para verlo
<!DOCTYPE html>
<html>
<head>

  <title>Ejemplo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //En host_backend debes poner tu función Django
    var host_backend = "https://jsonplaceholder.typicode.com/albums/"; 
    
    async function obt_Mensaje() {      
        return await $.ajax({
          type: "GET",
          url: host_backend+String(count),
          success: function(msg) {            
            return msg;
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                return false;
          },
      });
    }

    function pintar_Mensaje() {
        //Reinicio el contador para que evite errores al consultar un id que no exista
        if(count == 20) count = 0;
        
        count = count +1;
        
        obt_Mensaje()
        .then(msg =>{
          //Se obtuvo el msg correctamente.
          //Lo pintamos en el DOM 
          //En este caso particular, ya que eso depende de la API a la que consulto, obtengo "title" como Mensaje
          $("#mensaje").text(msg['title']);

        })
        .catch(err =>{
          //No se pudo Obtener el Mensaje
          console.log(err); //Esto hace que se imprima el error en la consola del navegador
        })
    }
    //Este contador es para consultar un dato diferente
    var count = 0;
    //Aquí ejecutara la función cada 1200 milisegundos
    var actualizar_msg = window.setInterval(function() { pintar_Mensaje() }, 1200);
  </script>
</head>
<body>

<h1 id="mensaje"></h1>

</body>
</html>

En tu función Django, devuelve el mensaje como un JSON.

Origen Enlace

Podrias utilizar ajax para realizar la solicitud a tu backend obtener el mensaje y despues con una funcion js pintarl el DOM del navegador.

//Usare como backend una api libre de prueba, tu deberias poner tu url de django
//Haz click en EJECUTAR o Copia todo el HTML guardalo como ejemplo.html y ejecutalo en tu navegador para verlo
<!DOCTYPE html>
<html>
<head>

  <title>Ejemplo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //en host_backend debes poner tu funcion Django
    var host_backend = "https://jsonplaceholder.typicode.com/albums/"; 
    
    async function obt_Mensaje() {      
        return await $.ajax({
          type: "GET",
          url: host_backend+String(count),
          success: function(msg) {            
            return msg;
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                return false;
          },
      });
    }

    function pintar_Mensaje() {
        //Reinicio el contador para que evitar errores al consultar un id que no exista
        if(count == 20) count = 0;
        
        count = count +1;
        
        obt_Mensaje()
        .then(msg =>{
          //Se Obtuvo el msg correctamente.
          //Lo pintamos en el DOM 
          //En este caso particular, ya que eso depende de la api a la que consulto, obtengo title como Mensaje
          $("#mensaje").text(msg['title']);

        })
        .catch(err =>{
          //No se pudo Obtener el Mensaje
          console.log(err); //Esto hace que se imprima el error en la consola del navegador
        })
    }
    //Este contador es para consultar un dato diferente
    var count = 0;
    //Aqui ejecutara la funcion cada 1200 milisegundos
    var actualizar_msg = window.setInterval(function() { pintar_Mensaje() }, 1200);
  </script>
</head>
<body>

<h1 id="mensaje"></h1>

</body>
</html>

En tu funcion Django, devuelve el mensaje como un JSON.

#Importar JSONRender
from rest_framework.renderers import JSONRenderer

#Crea la CLase JSONResponse
class JSONResponse(HttpResponse):
    """
    An HttpResponse that renders its content into JSON.
    """
    def __init__(self, data, **kwargs):
        content = JSONRenderer().render(data)
        kwargs['content_type'] = 'application/json'
        super(JSONResponse, self).__init__(content, **kwargs)

#En el return de tu Funcion, Deberias tener lo siguiente

  return JSONResponse(mensaje, status=200)