Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Ajax

Ajax permite mandar y recibir datos de manera asincrona


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 105

Visitas el mes pasado: 217

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Curso de ajax
ProgramacionWeb.net
Ajax Tutorial
w3schools.com
Manual de Ajax, Juan Mariano Fuentes (en PDF)
elrincondeajax.com
Taller Ajax
Desarrollo Web
Turorial de Ajax
cristalab.com
Introduccción a Ajax - Javier Eguíluz Pérez
librosweb.es
mini tutorial de Ajax
Bog de Ale Muñoz en Sofa Naranja.
Using POST method in XMLHTTPRequest
Artículo de openjs.com
Tip Para Solucionar Problema con Acentos al Utilizar AJAX
webadictos.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




AJAX (XII)

Ejemplo con POST

imagen ajax

Descripción

En esta página haremos un ejemplo sobre lo explicado en la página anterior, (Post en ObjetoAjax). En páginas anteriores hemos creado el objeto ObjetoAjax que nos facilita la tarea de transferir datos con ajax. En la página anterior hemos creado dos nuevos métodos para este objeto. Vamos en esta página a hacer un ejemplo en el que utilizaremos estos dos métodos.

En el ejemplo el usuario elige entre varias opciones de un select. Dependiendo de lo elegido veremos una imagen y un texto distinto.


Archivo HTML

Empezamos por el código HTML, el cual lo guardaremos con el nombre de ejemplo10.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 10</title>
<script type="text/javascript" src="objetoAjax5.js"></script>
<script type="text/javascript" src="ejemplo10.js"></script>
</head>
<body>
<h1>Ejemplo pasar datos con POST en ObjetoAjax()</h1>
<form action="#" name="imagenes">
<p>Elige un personaje y pulsa en enviar : 
<select name="personajes">
  <option value="ninguno">Nadie</option>
  <option value="mortadelo">Mortadelo</option>
  <option value="filemon">Filemón</option>
  <option value="super">Superintendente</option>
</select></p>
<p><input type="button" value="Enviar" onclick="enviar()"/></p>
<p><img id="miimagen" src="" alt="Sin foto: Elige un personaje" width="110" height="160" border="2"> </p>
<div id="mitexto"><p>No hay ningún personaje elegido.</p></div>
</body>
</html>

Hemos puesto links a los archivos javascript objetoAjax.js, que es donde guardamos el ObjetoAjax (puedes ver el código de este archivo en la página anterior); y al archivo ejemplo10.js, que crearemos a continuación.

En el archivo mediante un select en un formulario pedimos al usuario que eliga una opción, nos la envía con el botón enviar.

La respuesta del servidor la recogeremos en los "id" miimagen y mitexto.

Observa que de entrada hemos puesto una imagen vacía (sin ruta). Esto crea un cuadro vacío al principio.


Archivos Javascript

El primer archivo javascript que incluimos es objetoAjax.js. Puedes encontrar este archivo en la página anterior, donde lo hemos modificado.

incluimos también otro archivo javascript, propio de la página, en el que utilizaremos los métodos del ObjetoAjax. El archivo ejemplo10.js, que será el siguiente:

//función para enviar datos:
function enviar() {
    //recoger dato del select del formulario:
     lista = document.imagenes.personajes;
     seleccion = lista.options[lista.selectedIndex].value;
     misdatos="personaje="+seleccion;
     //cambiar la imagen: método cargaPost()
     ajax1=new ObjetoAjax();
     ajax1.cargaPost("ejemplo10_1.php",cambiaImagen,misdatos);
     function cambiaImagen(ruta) {
         document.getElementById("miimagen").src=ruta;
         }
     //cambiar el texto: metodo pedirPost()
     ajax2=new ObjetoAjax();
     ajax2.pedirPost("ejemplo10_2.php","mitexto",misdatos);
     }

El archivo consiste en una función que se activa cuando el usuario pulsa sobre el botón enviar. En ella vemos tres partes:

.

Archivos PHP.

Veamos ahora los archivos PHP indicados en el código javascript y a donde mandamos los datos.

El archivo ejemplo10_1.php recoge el dato enviado (personaje). Dependiendo de lo enviado nos envia una u otra url de la imagen. Este es el archivo ejemplo10_1.php .

<?php  
//recogemos el personaje elegido por el usuario
$miimagen=$_POST["personaje"]; 
//según el personaje devolvemos una u otra url:
switch ($miimagen) { 
    case "mortadelo":
    echo "objetos/mortadelo.gif";
    break;
    case "filemon":
    echo "objetos/Filemon.gif";
    break;
    case "super" :
    echo "objetos/super_vicente.gif";
    break;
    default:
    echo "";
    }
?>

En el archivo recogemos el dato enviado mediante POST y mediante una estructura switch devolvemos una u otra url de la imagen.

El segundo archivo PHP tendrá una estructura similar, sólo que en lugar de devolver una url, nos devolverá un texto. El archivo ejemplo10_2.php es el siguiente:

<?php  
header("Content-Type: text/plain; charset=iso-8859-1"); //Solucionar acentos
//recogemos el personaje elegido por el usuario
$mitexto=$_POST["personaje"];
//según el personaje devolvemos uno u otro texto:
switch ($mitexto) {
    case "mortadelo":
    echo "<p>Es el protagonista de la pareja. 
          Conocido por su afición a los disfraces.</p>";
    break;
    case "filemon":
    echo "<p>Compañero y jefe de Mortadelo, supuesto cerebro del grupo,
          aunque es el que se lleva todas las tortas.</p>";
    break;
    case "super" :
    echo "Jefe de la TIA, agencia donde trabajan Mortadelo y Filemón.</p>";
    break;
    default:
    echo "<p>No hay ningún personaje elegido.</p>";
    }
?>

El archivo es similar al anterior: recogemos el dato mediante POST, y dependiendo de lo enviado devolvemos un texto y otro de respuesta.

Observa que en la primera línea hemos puesto una llamada al método header Esta línea nos soluciona el problema de ver bien los acentos y otros caracteres. Trataremos este tema en la página siguiente.


Las imágenes

para que el ejemplo funcione ya sólo nos queda incluir las imágenes. Estas son las imágenes que utilizamos en el ejemplo. Si estás siguiendo el ejemplo con nosotros, copia las siguientes imágenes (botón derecho, guardar imagen como), en una carpeta llamada objetos.

Mortadelo Filemón Super-intendente

Comprobar resultados

Ya sólo nos queda comprobar cómo ha quedado el ejemplo. Si todo está correcto el ejemplo debe quedar como en el siguiente enlace:

Ejemplo 10



Posibilidades de PHP en ajax.

En este ejemplo hemos recogido unos datos que estaban en el propio archivo PHP. Sin embargo desde un archivo PHP podemos obtener datos de otros archivos o de una base de datos. Podemos también guardar los datos a mostrar en una base de datos, y llamar a un archivo PHP con ajax; PHP buscará la respuesta en una base de datos u otro archivo, y que nos la devuelve en la página. También podemos introducir los datos que obtenemos mediante un formulario en una base de datos.

Sobre cómo trabajar con otros archivos y cómo transferir datos de PHP a una base de datos, puedes encontrar información en nuestro Manual de PHP .





En la siguiente página veremos soluciones a uno de los problemas más comunes al iniciarse con ajax: lograr visualizar correctamente los acentos y otros caracteres especiales.

Problemas con acentos.



Manual de Ajax

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com