Scribd
Cargar
125 vistas16 páginas

Manual de Jquery

Este documento proporciona una introducción a jQuery y ofrece varios ejemplos de su uso. Explica que jQuery es un framework JavaScript que simplifica tareas comunes como la manipulación del DOM. Luego, presenta dos ejemplos básicos que muestran cómo cambiar el contenido de un elemento al hacer clic en un botón y cómo mostrar u ocultar un elemento al pasar el mouse sobre una capa. Finalmente, enumera los pasos para comenzar a utilizar jQuery en una página web.

Cargado por

LIS BRUZCO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
125 vistas16 páginas

Manual de Jquery

Este documento proporciona una introducción a jQuery y ofrece varios ejemplos de su uso. Explica que jQuery es un framework JavaScript que simplifica tareas comunes como la manipulación del DOM. Luego, presenta dos ejemplos básicos que muestran cómo cambiar el contenido de un elemento al hacer clic en un botón y cómo mostrar u ocultar un elemento al pasar el mouse sobre una capa. Finalmente, enumera los pasos para comenzar a utilizar jQuery en una página web.

Cargado por

LIS BRUZCO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

MANUAL DE JQUERY

Introducción a jQuery
Para simplificar, podríamos decir que jQuery es un framework Javascript, pero quizás
muchos de los lectores se preguntarán qué es un framework. Pues es un producto que sirve
como base para la programación avanzada de aplicaciones, que aporta una serie de funciones
o códigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas
librerías de código que contienen procesos o rutinas ya listos para usar. Los programadores
utilizan los frameworks para no tener que desarrollar ellos mismos las tareas más básicas,
puesto que en el propio framework ya hay implementaciones que están probadas, funcionan
y no se necesitan volver a programar.

EJEMPLOS EN JQUERY
Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un
botón, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto.

En este ejemplo tenemos una capa que tiene este código:

<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un


botón</div>

Luego tenemos dos botones con estos códigos:

<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón


<b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el
botón <b>B</b>')">

Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno)
que ejecutan una instrucción Javascript cuando se hace clic sobre ellos. La instrucción está
en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con
los elementos de la página. En este caso, por explicarlo rápidamente, se hace una selección
del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido
HTML del elemento. Aquí puede ver el ejemplo en vivo:
https://desarrolloweb.com/articulos/ejemplos/jquery/demo0.html
Es importante reconocer los tipos de selectores usados en CSS.
 Selector de identidad, Selector de clases y selector de etiquetas.
En el ejemplo anterior hacemos referencia al div con identificador “capa”, es decir, el div
esta identificado por el id. Por tanto a la hora de hacer referencia a ese div se hace con la
sintaxis utilizada en selector de identidad: (‘#capa’) y se le antepone el $ que es parte de la
sintaxis de jquery para hacer referencia a los elementos.

Segundo ejemplo:

En este segundo ejemplo tenemos este código HTML, con las dos capas.

<div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratón encima de


esta capa</div>
<br>
<div id="mensaje" style="display: none;">Has puesto el ratón encima!! <br>(Ahora quítalo
de la capa)</div>
Ahora vamos a tener un código Javascript con jQuery que defina los eventos del usuario,
para cuando sitúa el ratón dentro o fuera de la primera capa.
$("#capa").mouseenter(function(evento){
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensaje").css("display", "none");
});

De esta sencilla manera, hemos creado dos eventos en el DIV con id="capa". Además, hemos
definido el código de los eventos por medio de funciones, que se encargarán de mostrar o
ocultar la segunda capa con id="mensaje".

$("#mensaje").css("display", "block");
Esto nos selecciona la capa con id "mensaje" y con el método css() indicamos que queremos
cambiar el atributo "display" al valor "block" de ese elemento.

$("#mensaje").css("display", "none");
Esta otra línea muy similar, simplemente cambia el "display" a "none" para ocultar el
elemento.

Otra forma muy usada de ocultar o mostrar un div o cualquier otro elemento html es de la
siguiente manera:
$("#mensaje").hide();// Asi se oculta
$("#mensaje").show();// Asi se muestra

Pasos para utilizar JQUERY:

1.- Descarga la última versión del framework

Accede a la página de jQuery para descargar la última versión del framework.

2.- Crea una página HTML simple

Ahora, en el mismo directorio donde has colocado el archivo js, coloca un archivo html con
el siguiente código.

<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
AQUI COLOCAS EL CODIGO JAVASCRIPT Y JQUERY QUE
VAYAS A UTILIZAR
</script>
</head>
<body>
<a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a>
</body>
</html>
Va cambiar dependiendo de la versión que descargues y la carpeta donde la hayas guardado

<script src="bootstrap/jquery-2.1.4.js"></script>

Con ese script ya hemos incluido todas las funciones de jQuery dentro de nuestra página.
Sólo tienes que prestar atención a que tanto el archivo .html de esta página, como el archivo
.js del framework estén en el mismo directorio. Y, como decía, que el archivo que incluimos
con la etiqueta SCRIPT sea el .js que nosotros hemos descargado.
3.- Ejecutar código cuando la página ha sido cargada

Se trata de detectar el momento en que la página está lista para recibir comandos Javascript
que hacen uso del DOM.
Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la
página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la
estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos,
cambiar sus propiedades, etc. Si no esperamos a que la página esté lista para recibir
instrucciones corremos un alto riesgo de obtener errores de Javascript en la ejecución.

Sólo habría que hacerlo cuando el navegador ha recibido el código HTML completo y lo ha
procesado al renderizar la página. Para ello, jQuery incluye una manera de hacer acciones
justo cuando ya está lista la página, aunque haya elementos que no hayan sido cargados del
todo. Esto se hace con la siguiente sentencia.

$(document).ready(function(){
//código a ejecutar cuando el DOM está listo para recibir instrucciones.
});
Por dar una explicación a este código, digamos que con $(document) se obtiene una
referencia al documento (la página web) que se está cargando. Luego, con el método ready()
se define un evento, que se desata al quedar listo el documento para realizar acciones sobre
el DOM de la página.

4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página

Ahora que ya sabemos cómo y cuando debemos ejecutar las acciones de jQuery que alteren
la funcionalidad, contenidos o aspecto de la página, podemos insertar un poco de código para
demostrar el método de trabajo con jQuery.

Para este primer ejemplo vamos a crear un evento click en el enlace, para mostrar un mensaje
cuando se haga clic sobre el link. Para crear un evento click sobre un elemento tenemos que
invocar al método click sobre ese elemento y pasarle como parámetro una función con el
código que queremos que se ejecute cuando se hace clic.

$("a").click(function(evento){
//aquí el código que se debe ejecutar al hacer clic
});
Como vemos en el código anterior, con $("a") obtenemos una referencia al enlace. Bueno,
en realidad con ello estamos estamos seleccionando todas las etiquetas (a) (enlaces) del
documento. Luego, el método click() del sobre $("a") estamos definiendo un evento, que se
ejecutará cuando se haga clic sobre el enlace. Como se puede ver, al método click se le pasa
una función donde se debe poner el código Javascript que queremos que se ejecute cuando
se haga clic sobre el enlace.

Ahora veamos la definición del evento clic completa, colocada dentro del evento ready del
document, para que se asigne cuando la página está lista.

$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
});
});
Por líneas, esto es una recapitulación de lo que hemos hecho:

$(document).ready(function(){
Esta línea sirve para hacer cosas cuando la página está lista para recibir instrucciones jQuery
que modifiquen el DOM.

$("a").click(function(evento){
Con esta línea estamos seleccionando todas las etiquetas A del documento y definiendo un
evento click sobre esos elementos.

alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");


Con esta línea simplemente mostramos un mensaje de alerta informando al usuario que se ha
hecho clic sobre el enlace.

5.- Guarda el archivo html y ábrelo en un navegador

Una vez que tenemos hecho nuestra primera página con jQuery, la puedes guardar y
ejecutarla en un navegador. Prueba hacer clic en el enlace y debería salirte la ventana de
alerta.Ya está hecho y funcionando tu primer script con jQuery!

Por si acaso quedaron dudas, dejamos aquí el código completo que deberías tener:

<html>
<head>
<title>Primer script con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
});
});
</script>
</head>

<body>

<a href="http://www.desarrolloweb.com">Ir a DesarrolloWeb.com</a>

</body>

AÑADIR Y QUITAR CLASES CSS SOBRE ELEMENTOS

En el caso que nos ocupa, queremos demostrar el uso de jQuery para alterar elementos de
una página web, añadiendo y quitando clases CSS. Esto es bien simple, porque en jQuery los
elementos tienen dos clases llamadas addClass() y removeClass(), que sirven justamente para
que el elemento que recibe el método se le aplique una clase CSS o se le elimine. Así que lo
que vamos a aprender, con respecto al artículo anterior Para complicarlo sólo un poco más,
vamos a añadir y quitar clases del elemento con respuesta a acciones del usuario, para
aprender también nuevos eventos de usuario.

En nuestro ejemplo vamos a tener dos elementos. Primero una capa DIV con un texto.
Después tendremos un enlace que estará fuera de la capa DIV. Al situar el usuario el ratón
sobre un enlace añadiremos una clase CSS a la capa DIV y al retirar el ratón del enlace
eliminaremos la class CSS que habíamos añadido antes. Si se desea, para aclarar el caso de
nuestro ejemplo, podemos ver el ejercicio en marcha en una página aparte.

1.- Crear la página con una capa, un enlace y la definición de una clase CSS

El primer paso sería construir una página con todos los elementos que queremos que formen
parte de este primer ejemplo: la capa DIV, el enlace y la definición de la class CSS.

Además, ahora también vamos a incluir el script de jQuery, que lo necesitaremos para
acceder a las funciones del framework Javascript.
<html>
<head>
<title>Añadir y quitar clases CSS a elementos</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.clasecss{
background-color: #ff8800;
font-weight: bold;
}
</style>
</head>

<body>
<div id="capa">
Esta capa es independiente y voy a añadir y eliminar clases css sobre ella
</div>
<br>
<br>
<a href="http://www.desarrolloweb.com">Añadir y quitar clase en la capa de arriba</a>
</body>
</html>

2.- Recordar: añadir siempre los scripts jQuery cuando el documento está "ready"

Ahora vamos a empezar a meter el código Javascript, pero quiero comenzar por recordar a
los lectores que cualquier funcionalidad que queramos agregar a la página por medio de
jQuery, debe ser incluida cuando el documento está listo para recibir acciones que
modifiquen el DOM de la página.

Para esto tenemos que incluir siempre el código:

$(document).ready(function(){
//aquí meteremos las instrucciones que modifiquen el DOM
});
3.- Añadir los eventos mouseover y mouseout para añadir y quitar una clase CSS

En este paso vamos a crear un par de eventos que asociaremos a los enlaces. Este par de
eventos serán lanzados cuando el usuario coloque el puntero del ratón sobre el enlace
(mouseover) y cuando el usuario retire el ratón del enlace (mouseout).

Por ejemplo, para definir un evento mouseover se tiene que llamar al método mouseover()
sobre el elemento que queremos asociar el evento. Además, al método mouseover() se le
envía por parámetro una función con el código que se quiere ejecutar como respuesta a ese
evento.

En el caso de añadir una clase tenemos que utilizar el método addClass(), que se tiene que
invocar sobre el elemento al que queremos añadirle la clase. A addClass() tenemos que
pasarle una cadena con el nombre de la clase CSS que queremos añadir.

Para seleccionar el elemento que queremos añadir la clase hacemos $("#idElemento"), es


decir, utilizamos la función dólar pasándole el identificador del elemento que queremos
seleccionar, precedida del carácter "#". Por ejemplo, con $("#capa") estamos seleccionando
un elemento de la página cuyo id="capa".

$("a").mouseover(function(event){
$("#capa").addClass("clasecss");
});
De manera análoga, pero con el método mouseout(), definimos el evento para cuando el
usuario saca el puntero del ratón del enlace.

$("a").mouseout(function(event){
$("#capa").removeClass("clasecss");
});

4.- Código completo del ejemplo jQuery

Ahora veamos el código completo de este ejercicio.

<html>
<head>
<title>Añadir y quitar clases CSS a elementos</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.clasecss{
background-color: #ff8800;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(){
$("a").mouseover(function(event){
$("#capa").addClass("clasecss");
});
$("a").mouseout(function(event){
$("#capa").removeClass("clasecss");
});
});
</script>
</head>

<body>

<div id="capa">
Esta capa es independiente y voy a añadir y eliminar clases css sobre ella
</div>

<br>
<br>

<a href="http://www.desarrolloweb.com">Añadir y quitar clase en la capa de arriba</a>


</body>
</html>

Mostrar u ocultar elementos como respuesta a un evento


Ahora que ya sabemos cómo realizar un cambio en el atributo display, vamos a ver cómo
poner esta instrucción en marcha cuando el usuario realice acciones en la página. Recordar
que al principio del artículo comentaba que íbamos a crear un formulario con una casilla de
selección (campo checkbox) y que al activar ese campo se mostrarían otros contenidos en el
formulario. Al desactivarlo, se ocultarían esos contenidos del formulario.
Para entender bien lo que deseamos hacer, podemos ver el ejercicio en marcha en una página
aparte.

Lo primero que podemos presentar es el formulario con el que vamos a trabajar.

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor
de edad
<br>
<div id="formulariomayores" style="display: none;">
DatoS para mayores de edad: <input type="text" name="mayores_edad">
</div>
</form>
Como se podrá ver, es un formulario como otro cualquiera. Sólo que tiene una capa con
id="formulariomayores", que contiene los elementos del formulario que queremos mostrar u
ocultar al marcar o desmarcar el checkbox. Esa capa estará inicialmente oculta, y para ello
hemos colocado el atributo style="display: none;". Podemos fijarnos también en el checkbox
con id="mayoria_edad", que es el que va servir para marcar si se desea o no ver la parte final
del formulario.

Ahora hay que hacer cosas cuando se haga clic en el checkbox con id="mayoria_edad". Para
ello en deberíamos crear un código Javascript y jQuery como este:

$(document).ready(function(){
$("#mayoria_edad").click(function(){
//lo que se desee hacer al recibir un clic el checkbox
});
});
Como ya hemos comentado, estas líneas sirven para especificar eventos.
$(document).ready() se hace para lanzar instrucciones cuando el navegador está preparado
para recibirlas y $("#mayoria_edad").click() sirve para realizar acciones cuando se ha hecho
clic sobre el elemento con id "mayoria_edad", que es el checkbox del formulario. Ahora
tenemos que ver las instrucciones que debemos ejecutar como respuesta a ese evento.

if ($("#mayoria_edad").attr("checked")){
$("#formulariomayores").css("display", "block");
}else{
$("#formulariomayores").css("display", "none");
}
Básicamente lo que hacemos es comprobar el estado del atributo "checked" del elemento
"#mayoria_edad". Esto se hace con el método attr() indicando como parámetro el valor del
atributo HTML que queremos comprobar. Entonces, si estaba "checked", se tiene que mostrar
el elemento y si no estaba marcado el checkbox, habría que ocultarlo.

Espero que se haya entendido bien. Ahora dejo aquí el código completo de este ejemplo:

<html>
<head>
<title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#mayoria_edad").click(function(evento){
if ($("#mayoria_edad").attr("checked")){
$("#formulariomayores").css("display", "block");
}else{
$("#formulariomayores").css("display", "none");
}
});
});
</script>
</head>

<body>

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor
de edad
<br>
<div id="formulariomayores" style="display: none;">
Datos para mayores de edad: <input type="text" name="mayores_edad">
</div>
</form>

</body>
</html>

Ejemplo de efectos e interacción en jQuery

En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de


jQuery. Vamos a implementar un simple efecto de ocultar y mostrar un elemento de la página
web.

Podemos ver el ejemplo en marcha en una página aparte.

Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos
que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librería Effects.

Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los
enlaces.
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y
codificamos las llamadas a las funciones de Effects, que harán que se muestre y oculte la
capa.

El código Javascript, que hace uso de jQuery sería el siguiente:

$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});

$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
Como se puede ver, primero tenemos que definir el evento ready del objeto $(document),
para hacer cosas cuando el documento está preparado para recibir acciones.

Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método
click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la
etiqueta A.

$("#ocultar").click(function(event){
Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".

Nota: leer el artículo anterior Pasos para utilizar jQuery en tu página web, en el que
hablábamos sobre eventos y otras generalidades de este framework Javascript. Podremos
encontrar explicaciones más detalladas sobre cómo definir eventos Javascript con jQuery.
Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los
efectos.

$("#capaefectos").hide("slow");
Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id)
"capaefectos", se oculte. Pasamos el parámetro "slow" porque queremos que el efecto sea
lento.

Ahora veamos la función de los efectos con otra llamada:

$("#capaefectos").show(3000);
Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse
dure 3000 milisegundos.

No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples
pero atractivos con jQuery en vuestra página web. Ahora podréis ver el código completo de
este ejemplo creado por DesarrolloWeb.com para demostrar el uso de efectos.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Efectos con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});

$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>
<body>

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">


Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

</body>
</html>
Por último, pongo el enlace de nuevo al ejemplo en marcha.

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


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

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 de como usar $.post:


$(document).ready(function()
{
$("#boton").click(function(){
$.post("pagina_gestion.php", function(lo_que_retorna){
$("#cargaexterna").html(htmlexterno);
});
});
});

explico el código del ejemplo:

 Detectamos el click sobre el botón con id = ‘boton’.


 Cargamos el archivo externo ‘pagina_gestion.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
‘lo_que_retorna‘.
 El valor de ese parámetro ‘lo_que_retorna‘ 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("pagina_gestion.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:

Asi se reciben los datos en la pagina: pagina_gestion.php

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

También podría gustarte