Como usar Ajax con jQuery

jQuery ha conseguido simplificar muchos aspectos en la forma de interactuar con diferentes elementos de una página web, quizá uno de los aspectos que más me gusta y que más ha simplificado es para usar Ajax y poder solicitar datos de forma asíncrona.

Otra de las características que tiene jQuery para usar Ajax es que nos abre un amplio abanico de posibilidades para ello, algunas podéis verlas en los ejemplos que os pongo a continuación:

Uno de las funciones más usadas es $.load(), solo tendremos que indicar la etiqueta donde queremos cargar el contenido, de donde debemos obtener el contenido y que contenido seleccionar dentro de todo lo que nos devuelve.

$("#cargar").load("contenido.php #contenido", {datos-post: valor}
, function(){alert("Contenido dentro de la funcion"); });

En el ejemplo puse nombres identificativos para que se comprenda mejor lo que estoy realizando, para aclarar un poco más indicar que #cargar es donde queremos introducir el contenido dentro de la estructura HTML desde donde realizamos la petición y #contenido es lo que queremos recoger dentro de la URL contenido.php datos-post es para cuando necesitemos pasar algún parámetro por POST.

Si lo que queremos es enviar datos por POST o por GET podemos usar directamente las funciones $.get() o $.post(), directamente le indicaremos la URL donde queremos enviarlos y los valores que queremos que recoja de la siguiente manera:

$.post("recibodatos.php", { dato1: "valor1", dato2: "valor2" },
  function(data){
    alert("Lo que nos devuelve: " + data);
  });
$.get("recibodatos.php", { dato1: "valor1", dato2: "valor2" },
  function(data){
    alert("Lo que nos devuelve: " + data);
  });

Los dos ejemplo son prácticamente idénticos ya que la forma en que se usa es la misma, en este caso data es donde estaríamos recogiendo el contenido que posteriormente podremos cargar donde nos interese.

Podemos encontrar muchas otras formas de recibir datos por Ajax desde jQuery, quizá estas sean las más sencillas, podeis entrar en la categoría Ajax de jQuery para obtener otros ejemplos útiles.

Puedes hacer para continuar leyendo o ¡Puedes dejar un comentario en respuesta al artículo aquí!


Tutorial inicio rápido de jQuery
Tutorial inicio rápido de jQuery
Todo jQuery – Un blog dedicado a jQuery.
Todo jQuery – Un blog dedicado a jQuery.
Tutorial AJAX desde cero.
Tutorial AJAX desde cero.


Artículos relacionados

Realiza transiciones CSS3 fácilmente con jQuery Transit
Realiza transiciones CSS3 fácilmente con jQuery Transit
Tutorial rápido de jQuery
Tutorial rápido de jQuery
Calendario con jQuery
Calendario con jQuery
Videotutorial – AJAX, el futuro de la web.
Videotutorial – AJAX, el futuro de la web.