Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » Cargar un GIFT de progreso, Cuando carga datos

AJAX - Cargar un GIFT de progreso, Cuando carga datos

Volver
Nuevo Tema
<<>>
 
Vista:

Cargar un GIFT de progreso, Cuando carga datos

Publicado por eduardo valle (2 intervenciones) el 15/12/2006 17:20:06
Hola, me gustaria saber si alguien tiene un ejemplo con AJAX para cargar una imagen como una barra de progreso un (GIFT) que pèrmite visualizarla mientras, se ejecuta el procedimiento almancenado, para decirle al usuario cuando termino... YA QUE UN SP no SE SABE CUANTO SE DEMORA,,, es urgente YA QUE TENGO TODO LISTO PERO, TENGO UN PROCESO QUE DEMORA MUCHO...
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Barra de progreso con imagen GIF durante ejecución de procedimiento almacenado

Publicado por Alejandro (17 intervenciones) el 27/02/2024 20:32:15
Eduardo, entiendo, aquí tienes un ejemplo básico de cómo podrías implementar una barra de progreso con una imagen GIF mientras se ejecuta un procedimiento almacenado utilizando AJAX. En este ejemplo, estoy utilizando JavaScript puro y la librería jQuery para simplificar la manipulación del DOM y las solicitudes AJAX.

1. HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barra de Progreso con AJAX</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
 
  <div id="progress-container" style="display: none;">
    <img src="loading.gif" alt="Cargando...">
    <div id="progress-bar"></div>
  </div>
 
  <button onclick="ejecutarProcedimiento()">Ejecutar Procedimiento</button>
 
</body>
</html>

2. JavaScript (app.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function ejecutarProcedimiento() {
  // Mostrar barra de progreso
  $("#progress-container").show();
 
  // Simular una solicitud AJAX (debes ajustar esto según tu lógica)
  $.ajax({
    url: 'tu_servidor.php',  // Reemplaza con la URL de tu servidor
    type: 'POST',
    data: {
      // Puedes enviar parámetros al servidor si es necesario
    },
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
 
      // Configurar el evento de progreso
      xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
          var percentComplete = (evt.loaded / evt.total) * 100;
          // Actualizar la barra de progreso
          $("#progress-bar").css("width", percentComplete + "%");
        }
      }, false);
 
      return xhr;
    },
    success: function(response) {
      // Proceso completado, ocultar la barra de progreso
      $("#progress-container").hide();
      console.log("Proceso completado:", response);
    },
    error: function(xhr, status, error) {
      console.error("Error en la solicitud AJAX:", error);
    }
  });
}

3. PHP (tu_servidor.php):

En el archivo PHP en tu servidor, procesa el procedimiento almacenado y devuelve la respuesta necesaria:

1
2
3
4
5
6
7
8
9
<?php
// Simulación de un procedimiento almacenado que toma tiempo
sleep(5);
 
// Puedes realizar acciones adicionales aquí
 
// Enviar una respuesta (puede ser un mensaje de éxito, error, etc.)
echo "Procedimiento almacenado completado exitosamente";
?>

Este es un ejemplo simple, y debes adaptarlo según tu situación específica. Asegúrate de reemplazar la URL del servidor y ajustar las funciones según tus necesidades. Además, ten en cuenta que el código PHP simula la demora utilizando `sleep(5)`, pero en tu caso, esta parte se reemplazaría con la lógica de tu procedimiento almacenado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar