Tengo como ejemplo, dos scripts:
home.htmlviews.py views.py tiene una función con varias tareas, por ejemplo:
def home() list1 = [1, 2, 3, 4, 5] total1 = 0 for x in list1: total1 += x list2 = [10, 20, 30, 40, 50] total2 = 0 for x in list2: total2 += x return render_template("home.html") home.html tiene una función de JavaScript que actualiza una barra de progreso html/css dependiendo de cuál sea la variable 'value' :
<script> function updateProgressBar(progressBar, value) { value = Math.round(value); progressBar.querySelector(".progress__fill").style.width = `${value}%`; progressBar.querySelector(".progress__text").textContent = `${value}%`; } </script> La función de python puede variar en el tiempo de finalización. Como una forma de actualizar el progreso del usuario, después de que cada tarea (es decir, total1 completo, total2 completo) se realiza en home() , quiero enviar un valor a la función de JavaScript para que pueda actualizar la barra de progreso en home.html por ejemplo, si hubiera 5 tareas en home() , podría enviar el valor 20 después de la tarea 1, luego 40 después de la tarea 2, etc.
Soy nuevo en el "desarrollo web", por lo que me cuesta hacer esto y agradecería cualquier ayuda.
Gracias de antemano.
Una posible solución es enviar los datos desde el matraz:
# ... return render_template("home.html", **{ 'total1': total1, 'total2': total2 })Luego agregue dos elementos ocultos en el html que necesita para usar las variables:
<p id="total1" style="display:none;">{{ total1 }}</p> <p id="total2" style="display:none;">{{ total2 }}</p>Luego use JavaScript para cargar los datos de esos elementos:
const total1 = document.getElementById('total1'); const total2 = document.getElementById('total2'); // ...Entonces puede usar total1 y total2 en su archivo JavaScript.
Una mejor solución sería si el archivo JavaScript que tiene hiciera una solicitud AJAX hacia su servidor de matraz, donde el servidor podría tener una función separada para manejar la solicitud y enviar los datos.