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


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

Repasemos la función de jQuery get(), 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 GET.

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 post() y load(), esta última quedó obsoleta a partir de la versión 1.8.

En definitiva con get() se puede:

  • Cargar una página externa (HTML/PHP…)  en un determinado div/class/etiqueta.
  • Enviar parámetros con el método GET a una URL externa (Como si fuese un formulario).
  • Enviar parámetros con el método GET a una URL externa y mostrar el resultado.

Sintaxis de jQuery get()

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 GET.
  • funcion (Opcional): Función a ejecutar cuando se obtiene con éxito la URL.
    datos: Objeto devuelto con los valores de la petición GET.
    estado: Estado de la petición GET (“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 get()

Vamos a ver en este primer ejemplo de get() 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 ‘044-ejemplo-jquery-get-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 get() 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 ‘044-ejemplo-jquery-get-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:

comments powered by Disqus

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