BolUDO: El mismo ejemplo sin AJAX

Volveremos a confeccionar el mismo problema que muestra una lista de hipervínculos con los distintos signos del horóscopo, a diferencia del problema expuesta en el concepto anterior ahora no emplearemos AJAX, es decir recargaremos la página completamente al presionar alguno de los hipervínculos.

Como debemos recargar la página y actualizar en el servidor los datos del signo del horóscopo seleccionado confeccionaremos solo una página php.

pagina1.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <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">
<?php
if (!isset($_REQUEST['cod']))
  echo "Seleccione su signo.";
else
{    
    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.";
}
?>
</div>
</body>
</html>

Como podemos observar los hipervínculos llaman a la misma página:

href="pagina1.php?cod=1">Aries</a></p>

Luego el código PHP que se ejecuta en el servidor verifica el valor que llega como parámetro y muestra el detalle del signo del horóscopo seleccionado:

    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.";

En caso de no llegar parámetros a la página (normalmente la primer vez que cargamos la página) el primer if se verifica verdadero:

if (!isset($_REQUEST['cod']))
  echo "Seleccione su signo.";
else

Si comparamos este ejemplo con el anterior veremos que utilizar AJAX reduce la cantidad de información que pedimos al servidor, también evitamos la recarga completa de la página (imaginemos un sitio que contiene muchos elementos el redibujado es lento y engorroso)

La hoja de estilo no tiene cambios con respecto al problema anterior:

#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:20px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px #aaa;  
}

Problema resuelto.

Confeccionar un problema que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado actualice la página completa con el detalle del mismo, no emplear comunicación asincrónica con el servidor.

Para ver como se recarga toda la página puede agregar otros elementos haciéndola mas compleja (por ejemplo agregue 20 títulos h1) Observe luego que al presionar el hipervínculo se actualiza toda la ventana.

pagina1.php

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
<h1>Signos del horóscopo.</h1>
<div id="menu">
<a id="enlace1" href="pagina1.php?cod=1">Aries</a>
<a id="enlace2" href="pagina1.php?cod=2">Tauro</a>
<a id="enlace3" href="pagina1.php?cod=3">Geminis</a>
<a id="enlace4" href="pagina1.php?cod=4">Cancer</a>
<a id="enlace5" href="pagina1.php?cod=5">Leo</a>
<a id="enlace6" href="pagina1.php?cod=6">Virgo</a>
<a id="enlace7" href="pagina1.php?cod=7">Libra</a>
<a id="enlace8" href="pagina1.php?cod=8">Escorpio</a>
<a id="enlace9" href="pagina1.php?cod=9">Sagitario</a>
<a id="enlace10" href="pagina1.php?cod=10">Capricornio</a>
<a id="enlace11" href="pagina1.php?cod=11">Acuario</a>
<a id="enlace12" href="pagina1.php?cod=12">Piscis</a>
</div>
<div id="detalles">
<?php
if (!isset($_REQUEST['cod']))
 echo "Seleccione su signo.";
else
{ 
 if ($_REQUEST['cod']==1)
 echo "Aries: 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 "Tauro: 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 "Géminis: 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 "Cancer: 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 "Leo: 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 "Virgo: 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 "Libra: 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 "Escorpio: 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 "Sagitario: 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 "Capricornio: 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 "Acuario: 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 "Piscis: 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.";
}
?>
</div>
</body>
</html>

Ejecutar ejemplo

estilos.css

WEB TRANSLATOR

El mismo ejemplo sin AJAX

4 - El mismo ejemplo sin AJAX.

Problema resuelto.

Retornar

COMPÁRTELO:

Síguenos por RSS

Síguenos en las redes sociales

Mis cuentas sociales


Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías