Ajax con jQuery – básico

Ramón Torres

¿Cómo hacerlo?

Ejemplo 1

Cargamos la lista de departamentos a partir del país seleccionado (evento «change» del control).

  • Antes de enviar la petición colocamos una imagen ‘loading’ con el texto alternativo «Cargando departamentos…» (esto último en caso que no se encuentre la imagen).
  • Si el archivo a llamar no se encuentra mostramos una alerta con el texto «Ocurrio un problema al listar los departamentos del país seleccionado…».
  • Finalizada la petición ajax asignamos la salida obtenida al elemento con el id «states-cnt» (si se encontrarón departamentos, serán desplegados, sino será mostrado el texto «No hay departamentos configurados para este país»; esto es realizado por el archivo «find_states_by_country.php», el cual fue definido en el parámetro «url» del objeto $.ajax)

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

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#countries').change(function(e){
      var country_id = $(this).val();
      if(country_id != ''){
        var request_find_states =
          $.ajax({
            type: 'GET',
            url: "find_states_by_country.php",
            data: {country_id: country_id},
            beforeSend: function(xhr, settings){
              $("#states-cnt").html("<img src="loading.gif" alt="Cargando departamentos..." />")
            },
            success: function(response, xhr, status){
              $("#states-cnt").html(response);
            },
            error: function(xhr, status, exception){
              alert("Ocurrio un problema al listar los departamentos del pais seleccionado...");
            }
          });
      }
    });
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var request =
      $.ajax({
        type: 'GET', // tambien puede ser POST
        url: "ruta/al/archivo/a/llamar/via/ajax",
        data: {parametro_1: valor_1, parametro_2: valor_2},
        beforeSend: function(xhr, settings){
          // acciones antes de realizar la petición vía ajax por ejemplo,
          // podemos colocar un texto "Cargando..." para indicar al usuario que
          // se esta esperando cierta respuesta y ocultar  el botón que realiza
          // la peticion
        },
        success: function(response, xhr, status){
          // acciones a realizar una vez se haya realizado la petición
          // generalmente, procesar/mostrar la salida del archivo invocado
        },
        error: function(xhr, status, exception){
          // acciones a realizar en caso que no se encuentre el archivo a llamar
        }
      });
  });
</script>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

Post relacionados:

Categories: Jquery