Una sencilla llamada AJAX con jQuery

by Derekthar on 21 mayo, 2013 in desarrollo

Doy por supuesto que si has llegado aquí sabes que es jQuery. Bien pues, en ocasiones necesitamos hacer una llamada AJAX ejecutar un código de forma transaparente al usuario (o almenos sin recargar la página) y mostrar el resultado. Hoy por ejemplo me han pedido un enlace que borre un usuario.

En la parte frontal (en la vista) tengo el siguiente código:

<p class="enlacebaja"><a href="#" id="baja">Darme de baja</a></p>

<script type="text/javascript">
	jQuery('#baja').click(function(event){
		/* Primero, cancelamos el proceso flujo normal del click
		 * (es decir, no le dejamos procesar el enlace).
		 */
		event.preventDefault();

		// Creamos un objeto para enviar los datos por POST y lo poblamos
		var datos = new Object();
		datos.userId = <?php echo $user->getId(); ?>;
		datos.origenBaja = "Enlace web"; 

		url = '<?php echo DOCUMENTROOT; ?>/baja.php';

		jQuery.ajax({
			type: "POST",
			url: url,
			data: datos,
			dataType: "json",
			success: function(response){
				/* Actualizamos el contenido de la página según el resultado */
				if(response.status == 1){
					jQuery('.enlacebaja').html('Todo Ok.');
				} else {
					jQuery('.enlacebaja').html('Error.');
				}
			}
		});
	});
</script>

<p class="enlacebaja"><a href="#" id="baja">Darme de baja</a></p>

jQuery('#baja').click(function(event){

/* Primero, cancelamos el proceso flujo normal del click

* (es decir, no le dejamos procesar el enlace).

event.preventDefault();

// Creamos un objeto para enviar los datos por POST y lo poblamos

var datos = new Object();

datos.userId = <?php echo $user->getId(); ?>;

datos.origenBaja = "Enlace web";

url = '<?php echo DOCUMENTROOT; ?>/baja.php';

jQuery.ajax({

type: "POST",

url: url,

data: datos,

dataType: "json",

success: function(response){

/* Actualizamos el contenido de la página según el resultado */

if(response.status == 1){

jQuery('.enlacebaja').html('Todo Ok.');

} else {

jQuery('.enlacebaja').html('Error.');

}

});

</script>

Y en el fichero baja.php despues de hacer las operaciones que necesitemos (los datos se han enviado por POST), devolveríamos el resultado de la siguiente forma:

	// Si todo ha ido bien.
	$resultado = array('status' => 1);
	// Si ha habido un error. 
	$resultado = array('status' => 0);
	echo json_encode($resultado);

// Si todo ha ido bien.

$resultado = array('status' => 1);

// Si ha habido un error.

$resultado = array('status' => 0);

echo json_encode($resultado);

Y con esto tendríamos el contenido básico de una llamada AJAX. Luego ya la podemos complicar todo lo que necesitemos.