jQuery / Ajax – Haciendo un POST request

Bienvenidos sean a este post, hoy veremos otra alternativa de como enviar datos.

En el post anterior vimos como solicitar datos por medio de la solicitud GET, una de las utilizadas por los forrmularios, y hoy revisitaremos ese ejemplo pero para verlo a traves de la otra forma como es POST, si no vienen del post anterior antes de continuar les recomiendo instalar un servidor web porque es la unica forma de comprobar su funcionamiento, para ello primero les recomiendo este post:

En este veremos como instalar una pc virtual y en este un linux debian, una vez instalado tienen el siguiente post:

En este les comento como instalar Apache (servidor web) y PHP en un debian, los cuales son necesario y de forma opcional un mariadb, una vez instalado todo esto solamente resta descargar el codigo del post anterior:

Extraigan los archivos en el servidor creado y listo para poder empezar a trabajar, mucho de lo que usaremos ya esta explicado en el post anterior, pero hoy nos centraremos en el archivo codigo.js, para ello modificarermos el siguiente segmento de codigo:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$.get('p.php', solicitud, function(datos) {
			$('#diccionario').html(datos);
		});
	});
});

De la siguiente manera:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$.post('p.php', solicitud, function(datos) {
			$('#diccionario').html(datos);
		});
	});
});

El codigo es el mismo pero vamos a comentarlo un poco antes de hablar sobre el cambio, aplicaremos el evento click al link del div primigenios, para ello usamos un argumento que recibira el evento en si, a esta variable le aplicaremos la funcion preventDefault para que este no aplique su conducta normal, lo siguiente fue definir un objeto donde estableceremos el valor de buscar con el contenido dentro del link, no la URL, despues tenemos el cambio donde en lugar de usar el metodo get usaremos al metodo post, le pasamos la pagina de PHP, el objeto anterior y una funcion que recibira los datos devueltos para la pagina pasada como argumento, por ultimo el resultado almacenado en datos seran escritos por medio de html en el div identificado como diccionario, este ultimo se encuentra en el archivo indice.html.

Se que puede generar algunas dudas pero si miran el archivo p.php este primero contendra la informacion que mostraremos pero a su vez una funcion para crearlo y tambien para buscarlo, en este caso a traves del campo buscar que lo pasamos en solicitud, en caso de no encontrarlo tambien lo comenta, pasemos a probarlo mediante el siguiente video

Si lo comparamos con lo visto en el post anterior sigue trabajando de la misma forma pero con la solicitud de tipo POST, aunque este codigo se puede mejorar un poco mas,, tomemos el codigo anterior y modifiquemoslo de la siguiente manera:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$('#diccionario').load('p.php',solicitud);
	});
});

En este nuevo codigo quitamos al metodo post y lo reemplazamos por load porque este de manera predeterminada lo utiliza para enviar la informacion, y en este caso primero pasaremos la pagina del lado del servidor y despues el objeto que generamos anteriormente para generar la consulta y obtener la respuesta, si lo prueban debera funcionar tal como lo vimos en el video anterior, con esto ya cubrimos como solicitar informacion por medio de POST y de GET, antes de terminar les dejo un link con todos los codigos finles del proyecto que trabajamos en este post:

En resumen, hoy hemos visto como enviar una solicitud de tipo POST, hemos modificado el codigo para hacerlo de esta forma, asi como tambien hemos visto como simplificar este tipo de consulta, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.