Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

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:

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.

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:

El código HTML del ejemplo es el siguiente:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies