Temas > Programacion > Java script - Java > Ajax metodo load en jQuery
Julio

Ajax: método load
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
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </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>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
   var x;
   x=$("#menu a");
   x.click(presionEnlace);
 }
 function presionEnlace()
 {
   var pagina=$(this).attr("href");
   var x=$("#detalles");
   x.load(pagina);
   return false;
 }
?>//esto no va
pagina1.php
 <?php
 header(`Content-Type: text/html; charset=ISO-8859-1`);
 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."; 
?>
estilos.css
<?php //esto no va
 #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;
 }
?>//esto no va
Como podemos observar el código JavaScript es muy pequeño, 
veamos:
<?php //esto no va
function inicializarEventos()
{
   var x;
   x=$("#menu a");
   x.click(presionEnlace);
}
?>//esto no va
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:
<?php //esto no va
function presionEnlace()
{
   var pagina=$(this).attr("href");
   var x=$("#detalles");
   x.load(pagina);
   return false;
}
?>//esto no va
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)
   var pagina=$(this).attr("href");
Creamos un objeto jQuery a partir del div #detalles:
   var 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













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
      1
2 345678
9101112131415
16171819202122
23242526272829
3031     

Martes 3 de Diciembre 2024
Semana 49

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar