Cualquiera que sea nuestro método preferido de obtención de datos asíncronos desde nuestro servidor, con jQuery es tan sencillo como llamar a la correspondiente función.
El siguiente ejemplo muestra el caso AJAH, quizá el más sencillo de explicar, pero funcionará igual cualquiera que sea el formato retornado por el servidor.
La petición se puede realizar tanto con parámetros adicionales GET como POST.
var url = "http://www.danielnavarroymas.com/datos-a-obtener.php?dato=valor";
jQuery.get(
url,
null,
function(data) {
jQuery('#id-del-div-a-actualizar').html(data);
});
Si necesitamos enviar datos POST para recuperar los datos, podría ser algo así:
var url = "http://www.danielnavarroymas.com/datos-a-obtener.php";
var postData = {'dato1' : dato1, 'dato2' : dato2};
jQuery.post(url, postData, function(data) {
jQuery('#id-del-div-a-actualizar').html(data);
});
En este caso, como estamos actualizando directamente un elemento de la página (un
,, etc.), el formato de datos retornado por nuestra página de datos (en el ejemplo ‘/datos-a-obtener.php’), podría ser, por ejemplo:
<div class="estilo-css"> Contenido actualizado! </div>
Sólo a modo de recordatorio:
- AJAX – Asynchronous Javascript And XML
- AJAH – Asynchronous Javascript And HTML
- AJAJ – Asynchronous Javascript And JSON
Hey! Qué opinas sobre el artículo?