Entendido.

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

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++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

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: 13-07-2018.

Visitas este mes: 46

Visitas el mes pasado: 134

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.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

AJAX (XII)

Ejemplo con POST

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:

Primero recogemos el dato seleccionado por el usuario en la lista select
En segundo lugar enviamos el dato mediante ajax a un archivo ejemplo10_1.php el cual nos devolverá la ruta de la imagen. Colocamos después la ruta en la imagen.
Por último mandamos mediante ajax el dato a otro archivo ejemplo10_2.php el cual nos devolverá un texto que veremos en el id indicado.

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.

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