Ajax permite mandar y recibir datos de manera asincrona
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 46
Visitas el mes pasado: 134
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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.
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:
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.
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.
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:
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.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com