jQuery post(): Envío y carga de datos a una página externa

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:

$.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:

$(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:

<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.

$(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:

$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:

<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:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM