Con el método
Ajax de jQuery, puedes realizar peticiones asíncronas al servidor de la misma forma en la que lo harías implementando una función XHR con JS nativo. Aunque el método tiene varios atributos, basta con que utilices algunos para realizar un envío de datos a un archivo determinado y realizar algo con la respuesta obtenida de éste.
Con un pequeño ejemplo se puede entender mejor:
Archivo inicial Archivo JavaScript
Código Javascript
:
Ver original$("#buscar").click(function(){
$.ajax({
url: "buscar.php",
type: "GET",
dato: {nombre: $("#nombre").val()},
}).done(function(response){
$("#resultados").html(response);
}).fail(function(jqXHR, textStatus){
alert("Se ha producido un fallo: " + textStatus);
});
});
Código PHP:
Ver original$nombre = $_GET["nombre"];
$query = mysql_query("SELECT * FROM usuarios WHERE nombre LIKE '%$nombre%'"); echo "Nombres encontrados: <br />";
echo $row["nombre"] . "<br />";
}
}
else{
echo "No se encontraron coincidencias";
}
En el archivo inicial, tengo una caja de texto de Id "nombre", un botón de Id "buscar" y una sección de Id "resultados", lo que hago en el archivo JavaScript es básicamente lo siguiente; cuando el usuario de un clic en el botón, se ejecuta el método Ajax, en el cual envío el valor contenido en la caja "nombre" hacia el archivo "buscar.php", eligiendo el método GET para el envío del dato (pude haber elegido POST). Cuando el envío y recepción de datos se haya completado y se haya recibido una respuesta del servidor (done), asignamos dicha respuesta como contenido de la sección "resultados", pero si se produce un fallo (fail), muestro un mensaje de alerta notificando al usuario del fallo sucedido.
Otra forma de realizar algo cuando ya se tiene una respuesta es a través del método
success:
Código Javascript
:
Ver original$("#buscar").click(function(){
$.ajax({
url: "buscar.php",
type: "GET",
dato: {nombre: $("#nombre").val()},
success: function(response){
$("#resultados").html(response);
},
error: function(jqXHR, textStatus){
alert("Se ha producido un fallo: " + textStatus);
}
});
});
Finalmente, en el archivo "buscar.php", recibimos el valor mediante el método GET que es el que señalamos en el atributo "type" del método Ajax y que es el método por defecto, realizamos una búsqueda en la BD con dicho dato, si encontramos coincidencias, las mostramos en una lista, caso contrario, se muestra un mensaje en el que se le indica al usuario que no se encontraron datos con el dato ingresado. Dicho resultado (la lista de datos o el mensaje de error), es la respuesta del servidor que mostraremos dentro de la sección "resultados" en el primer archivo.
Dale una leída al manual oficial para que aprendas más al respecto:
http://api.jquery.com/jQuery.ajax/
Saludos
, para que desaparezca el nombre al soltarlo sobre cualquier elemento del menú, lo que hice fue agregar lo siguiente:
