25 - Ajax: método load. |
Para el entendimiento de los próximos conceptos se recomienda haber realizado el tutorial de AJAX Ya
Este método es el más sencillo para recuperar datos del servidor.
La sintaxis de este método es el siguiente:
load([nombre de la página],[parámetros],[funcion final])
Otra cosa muy importante es la llamada de este método a partir del elemento HTML donde queremos que se agregue la información que retorna el servidor (es decir que utilizamos este método cuando no tenemos que procesarlo en el navegador, sino directamente mostrarlo en forma completa). El segundo y tercer parámetro son opcionales.
Problema:Confeccionar una página que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Signos del horóscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#menu a");
x.click(presionEnlace);
}
function presionEnlace() {
let pagina = $(this).attr("href");
let x = $("#detalles");
x.load(pagina);
return false;
}
pagina1.php
<?php
header('Content-Type: text/html; charset=UTF-8');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios serán físicos,
personales, de carácter, Te sentirás impulsivo y tomarás
iniciativas. Período en donde considerarás unirte a agrupaciones
de beneficencia, o de ayuda a los demás.";
if ($_REQUEST['cod']==2)
echo "<strong>Tauro:</strong> Hoy los cambios serán privados,
íntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu
cónyuge puede aportar buen status a tu vida o apoyo a tu profesión.";
if ($_REQUEST['cod']==3)
echo "<strong>Géminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos. Día esperanzado,
ilusiones. Mucha energía sexual y fuerza emocional. Deseos difíciles
de controlar.";
if ($_REQUEST['cod']==4)
echo "<strong>Cancer:</strong> Este día la profesión
y las relaciones con superiores y con tu madre serán de importancia. Actividad
en relación a estos temas. Momentos positivos con compañeros de
trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
echo "<strong>Leo:</strong> Este día los estudios, los
viajes, el extranjero y la espiritualidad serán lo importante. Pensamientos,
religión y filosofía también. Vivencias kármicas de
la época te vuelven responsable tomando decisiones.";
if ($_REQUEST['cod']==6)
echo "<strong>Virgo:</strong> Para este día toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias
extrañas. Hay karma de prueba durante este período en tu parte psicológica,
generándose algunos replanteos.";
if ($_REQUEST['cod']==7)
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, también con socios, con la gente o el público. Ellos
serán lo más importante del día. Ganancias a través
de especulaciones o del juego. Actividades vocacionales artísticas.";
if ($_REQUEST['cod']==8)
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atención a ambos. Experiencias
diversas con compañeros. Durante este período tendrás muchos
recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
echo "<strong>Sagitario:</strong> Durante este día se
vivirán cambios en relación a los noviazgos o a los hijos. Creatividad,
actividad, diversiones y salidas. Período de encuentros con personas o
situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
echo "<strong>Capricornio:</strong> Los cambios del día
tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos
al carácter en la convivencia. El karma de responsabilidad de estos momentos
te acercará al mundo de lo desconocido, mucha madurez y contacto con el
más allá.";
if ($_REQUEST['cod']==11)
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicación, los
viajes cortos o traslados frecuentes. El hablar y trasladarse será importante
hoy. Mentalidad e ideas activas.";
if ($_REQUEST['cod']==12)
echo "<strong>Piscis:</strong> Durante este día se vivirán
cambios en la economía, movimientos en los ingresos, negocios, valores.
Momentos de gran fuerza y decisión profesionales, buscarás el liderazgo.";
?>
estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Como podemos observar el código JavaScript es muy pequeño, veamos:
function inicializarEventos() {
let x = $("#menu a");
x.click(presionEnlace);
}
En la función inicializarEventos cremos un objeto jQuery con la referencia de todas las anclas que están contenidas en el div #menu. Asociamos el evento click a todos los enlaces.
La función presionEnlace:
function presionEnlace() {
let pagina = $(this).attr("href");
let x = $("#detalles");
x.load(pagina);
return false;
}
Extraemos el atributo href del hipervínculo que disparó el evento (tengamos en cuenta que almacena el nombre de la página y el parámetro, por ejemplo:"pagina1.php?cod=6)
let pagina = $(this).attr("href");
Creamos un objeto jQuery a partir del div #detalles:
let x = $("#detalles");
Llamamos al método load del objeto jQuery y le pasamos como parámetro el nombre de la página a recuperar:
x.load(pagina);
El método load se encarga de hacer la comunicación asincrónica con el servidor, esperar y recibir los datos y finalmente añadir la información al elemento HTML (en nuestro ejemplo el div #detalles)
Por último la función retorna false para anular la propagación de eventos y desactivar también el evento por defecto que ocurre cuando se presiona un enlace.