Saltar la navegación

3.3.- Los métodos .load(), $.post() , $.get() y $.getJSON() en jQuery.

Dos flechas en círculo.
Clker-Free-Vector-Images (Pixabay License)

La función $.ajax() es una función muy completa, y resulta bastante pesada de usar. Su uso es recomendable, para casos muy concretos, en los que tengamos que llevar un control exhaustivo de la petición AJAX. Para facilitarnos el trabajo, se crearon 3 funciones adicionales de alto nivel, que permiten realizar peticiones y gestionar las respuestas obtenidas del servidor:

El método .load()

Este método, es la forma más sencilla de obtener datos desde el servidor, ya que de forma predeterminada, los datos obtenidos son cargados en el objeto al cuál le estamos aplicando el método.

Su sintaxis es: .load( url, [datos], [callback] )

La función callback es opcional, y es ahí donde pondremos la función de retorno, que será llamada una vez terminada la petición. En esa función realizaremos tareas adicionales, ya que la acción por defecto de cargar en un objeto el contenido devuelto en la petición, la realiza el propio método load().

Por tanto, podemos realizar lo mismo que en el ejemplo anterior pero utilizando este método:

$( () => {
	$("#resultados").load('http://localhost/fecha.php', (respuesta) => {
			$("#estado").toggleClass('cargada');
			$("#estado").text("Cargada.");
		}
	);
});

El método $.post()

Nos permite realizar peticiones AJAX al servidor, empleando el método POST. Su sintaxis es la siguiente:

$.post( url, [datos], [callback], [tipo] )

Por tanto, podemos modificar nuestro ejemplo que hacia una llamada de tipo por éste otro:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DWEC07.- Ejemplo jQuery método post</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$( () => {
				$.post('http://localhost/procesar.php', 'nombre=Bob&apellidos=Esponja', (respuesta) => {
					$("#resultados").html(respuesta);
				});
			});
		</script>
		<style>
			#resultados{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<p>
			A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
		</p>
		<p>
			Contenedor resultados:
			<div id="resultados"></div>
		</p>
	</body>
</html>

Los métodos $.get() y $.getJSON()

Hacen prácticamente lo mismo que POST, y tienen los mismos parámetros, pero usan el método GET para enviar los datos al servidor. Si recibimos los datos en formato JSON, podemos emplear $.getJSON() en su lugar.

$.get( url, [datos], [callback], [tipo] ) | $.getJSON( url, [datos], [callback], [tipo] )