Aprendiendo jQuery: Capitulo 21 (Método get)

El otro día vimos como realizar una llamada ajax desde jQuery con el método de ajax, hoy usaremos un método más específico como es el método “.Get” que se utiliza para realizar una llamada en la que obtener datos de otro archivo (php, html, etc…). En ningún caso se utiliza el método Get para añadir o modificar el archivo al que se llama, por tanto es una llamada siempre no destructiva.

Si por ejemplo nosotros tenemos un archivo al que le llamemos “hello.html” con el contenido:

Hola Mundo

En este caso veremos el siguiente ejemplo jQuery que nos va a traer y limpiar un pequeño div en el que veremos el contenido del archivo html, como todos los métodos ajax al funcionar de forma asíncrona debemos pasarle como segundo parámetro una función que gestionará la respuesta a la petición solicitada:

jQuery('#btLimpiar').click(function(){
	jQuery('#cap21result').html("");
});


jQuery('#btRecuperar').click(function(){
	jQuery.get('/Scripts/hello.html', function(data){
		jQuery('#cap21result').html(data);
	});
});

Un caso práctico de esto podría ser si tuviéramos un menú de navegación aparte en un archivo html y esto se cargara en todas las páginas, así sólo sería necesario cargarlo en una página y no página por página.

Por otro lado, otro ejemplo sería que además de realizar la petición Get se le pueden pasar nuestros parámetros que queremos enviar, esto es útil si por ejemplo es un archivo php que espera además algún valor en función del que resolverá la respuesta cómo podría ser el siguiente código php:


Para solicitar esta página podemos realizar una llamada mediante get pasándole el parámetro nombre en formato JSON de la siguiente forma:

jQuery('#btRecuperar2').click(function(){
	var name;
	name = jQuery('#txtcap21').text();
	jQuery.get('/Scripts/cap21test.php', 
			{nombre:name},
		function(data){
			jQuery('#cap21result2').html(data);
	});
});