Repasemos la función de jQuery post(), su funcionalidad es la de enviar y/o cargar datos de una URL externa (HTML, PHP…) de forma asíncrona (AJAX) mediante el método HTTP POST.
Esta función también puede cargar una página externa en un div, id, class o similar. Es similar a las funciones de jQuery get() y load(), esta última quedó obsoleta a partir de la versión 1.8.
En definitiva con post() se puede:
- Cargar una página externa (HTML/PHP…) en un determinado div/class/etiqueta.
- Enviar parámetros con el método POST a una URL externa (Como si fuese un formulario).
- Enviar parámetros con el método POST a una URL externa y mostrar el resultado.
Sintaxis de jQuery post()
Vamos a ver la sintaxis extraída de su web oficial:
1 |
$.post(URL, parametros, funcion(datos, estado, xhr), tipoDato) |
Veamos los diferentes parámetros de la función:
- URL (Obligatorio): URL que queremos obtener.
- parametros (Opcional): Son los valores que queremos enviar con método POST.
- funcion (Opcional): Función a ejecutar cuando se obtiene con éxito la URL.
– datos: Objeto devuelto con los valores de la petición POST.
– estado: Estado de la petición POST («success», «notmodified», «error», «timeout» o «parsererror»)
– xhr: Valores del objeto XMLHttpRequest. - tipoDato (Opcional): Tipo de formato devuelto por la petición (xml, html, text, script, json o jsonp).
Ejemplo para cargar una página externa en un div con jQuery post()
Vamos a ver en este primer ejemplo de post() cómo cargar una pagína HTML externa en nuestra web:
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $("#boton").click(function(){ $.post("046-ejemplo-jquery-post-pagina-externa02.php", function(htmlexterno){ $("#cargaexterna").html(htmlexterno); }); }); }); |
Os explico el código del ejemplo:
- Detectamos el click sobre el botón con id = ‘boton’.
- Cargamos el archivo externo ‘046-ejemplo-jquery-post-pagina-externa02.php’ y ejecutamos una función si no se detecta error.
- Dicha función guardará el resultado en el parámetro que hemos pasado llamado ‘htmlexterno‘.
- El valor de ese parámetro ‘htmlexterno‘ lo cargamos en el id ‘cargaexterna‘ con la función de jQuery html().
El código HTML del ejemplo es el siguiente:
1 2 |
<input type="button" id="boton" value="Cargar HTML externo"> <div id="cargaexterna">Aquí se cargará el HTML externo</div> |
Ejemplo para cargar una página externa con envío de parámetros
Vamos a ver en este segundo ejemplo de jquery post() cómo enviar parámetros y mostrar el resultado de la petición AJAX con método GET.
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $("#boton").click(function(){ $.post("046-ejemplo-jquery-post-parametros2.php", {coche: "Ford", modelo: "Focus", color: "rojo"}, function(htmlexterno){ $("#cargaexterna").html(htmlexterno); }); }); }); |
Os explico el código del segundo ejemplo:
- Detectamos el click sobre el botón con id = ‘boton’.
- Cargamos la url externa ‘046-ejemplo-jquery-post-parametros2.php’ con el envío de parámetros (coche: «Ford», modelo: «Focus», color: «rojo»), ejecutamos una función si no se detecta error.
- Dicha función guardará el resultado en el parámetro que hemos pasado llamado ‘htmlexterno‘.
- El valor de ese parámetro ‘htmlexterno‘ lo cargamos en el id ‘cargaexterna‘ con la función de jQuery html().
- Los parámetros se muestran en pantalla tras haberlos procesado en la url externa.
El código PHP necesario en la URL externa para mostrar los parámetros es el siguiente:
1 2 3 4 |
$coche = $_POST['coche']; $modelo = $_POST['modelo']; $color = $_POST['color']; echo "El coche es de la marca $coche, el modelo es un $modelo y su color es $color"; |
El código HTML del ejemplo es el siguiente:
1 2 |
<input type="button" id="boton" value="Enviar parámetros"> <div id="cargaexterna">Aquí se mostrarán los parámetros enviados</div> |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: