Llamadas sencillas AJAX con JQUERY
0 Comments
Antes de todo y si se quiere emepzar bien, no será de más echarle una ojeada a la documentacion de JQuery, que relativamente no es mucha: http://docs.jquery.com/Main_Page
1- ponemos un identificador (atributo id) para seleccionarlo desde jQuery.
<a href="#" id="enlaceajax">Haz clic!</a>
2- recordemos cómo asignar una función para cuando se haga clic en el enlace:
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
});
})
3- Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:
$("#destino").load("contenido-ajax.html");
Ejemplo completo:
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("contenido-ajax.html");
});
})
</script>
</head>
<body><a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>
</body>
</html>
Tambien es muy interesante, aparte de ver la callback de load en el ejemplo anterior, ver la $.ajax(options)
De tal forma de hacer llamadas así de facil:
$.ajax({ type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}});
Más documentación en la API de AJAX de JQuey : http://docs.jquery.com/Ajax
