Formulario con ajax y php

Formulario con ajax y php

En temas anteriores ya hemos creado formulario con ajax y php pero no hemos creado un ejemplo en el cual podamos obtener los datos en tiempo real. Cada dia mas vemos como sitios web como facebook , twitter , Google entre otros usan esta tecnología para darle más potencialidad a su sitios web.

Formulario con ajax y php entradas relacionads

Validar formularios con php y ajax
Validar formularios con ajax
Enviar y procesar formularios con ajax

Si te has fijado en los formularios de comentarios de facebook o de twitter veras que cada vez que envía un mensaje este aparece de manera instantánea o sea en milisegundos. Tal vez veamos esa tecnología y nos sorprendamos al ver que tan potente es esta aplicación, y si te sorprende como programador web o como aprendiz estas en todo tus derechos porque es bastante sorprendente dicha tecnología.

Formulario con ajax y php en tiempo real.

Como sabemos ajax no es una tecnología en sí, más bien es un conjunto de tecnología combinada con las cuales podemos obtener efectos muy potentes para nuestras aplicaciones web. Ajax a pesar de ser una tecnología muy fácil de aprender requiere de un amplio conocimiento en los lenguajes de programación web básica como son php, javaScript,xml,Dhtml entre otros.

En este mini tutorial de formulario con ajax vamos a ver cómo crear un formulario con ajax y php que nos envié una información y dicha información la vamos a manipular a nuestro gusto para obtenerla del servidor en tiempo real o sea al mismo tiempo que presiones el botón para enviar la información y lo mejor de todo sin recargar la pagina.
Nuestro primero formulario con ajax y php.

Index.php

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Formulario con ajax</title>
<script language="javascript" src="ajax.js">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Formulario con ajax</h1><br />
<div id="texto"></div><br /><a href="#" onClick="pasarNumeros()">Ver comentarios</a></div>
<br />
<br />
<form name="form1">
<textarea name="contenido" cols="30" rows="4" ></textarea><br /><br />
<input type="button" value="Procesar" onClick="pasarNumeros()" />
</form>
</body>
</html>

Si te fijas en el index.php lo que hemos creado una estructura básica en html y hemos enlazado un documento llamado ajax.js y una hoja de estilo llamada style.css. Luego más abajo creamos un formulario y lo controlamos con un evento que se va a lanzar cuando se presione el botón.

Ajax.js

function pasarNumeros(){
var conexion;
if(window.XMLHttpRequest){
conexion = new XMLHttpRequest();
}else{
conexion = new ActiveXOject("Microsoft.XMLHTTP");
}
conexion.onreadystatechange = function(){
if(conexion.readyState==3 && conexion.status==200){
document.getElementById("texto").innerHTML=conexion.responseText;
}
}
var datos= document.form1.contenido.value;
conexion.open("GET",'datos.php?variable='+datos, true);
conexion.send();
}

Este es el archivo que realiza la magia en nuestro documento HTML con este luego de presionar el botón en el documento HTML se encarga de realizar las operaciones necesarias por debajo de la url para que no se recargue la página y nos devuelve el dato tan pronto como sea posible.

Datos.php

<?php
$archivo = fopen('datos.txt', 'a');
fwrite($archivo, '<div id="comentarios">'
.$_GET['variable'].'<br /></div>');
include('datos.txt');
?>

Si te fijas este es un archivo muy simple lo que hacemos en el es crear un archivo txt que nos permita ir almacenando los datos que nos va a enviar el ,b>archivo ajax.js

esta parte es opcionar porque también lo podemos ir guardando en una base de datos mysql pero bueno ya eso depende de ustedes. Pero en caso que lo quiera hacer y no lo entiendan solo me avisan para crearle otro ,b>mini-tutorial con base de datos.

Style.css

textarea{
border:solid 1px #999;
border-radius:5px;
resize:none;
padding:10px;
width:250px;
height:30px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
}
textarea:focus{
width:300px;
height:50px;
box-shadow:0 0 15px #999;
-moz-box-shadow:0 0 15px #999;
-o-box-shadow:0 0 15px #999;
-ms-box-shadow:0 0 15px #999;
-webkit-box-shadow:0 0 15px #999;
}
input{
width:100px;
padding:5px;
background:-moz-linear-gradient(#dadada 0%, #fff 100%);
background:-o-linear-gradient(#dadada 0%, #fff 100%);
background:-ms-linear-gradient(#dadada 0%, #fff 100%);
background:-webkit-linear-gradient(#dadada 0%, #fff 100%);
color:blue;
border:solid 1px #DADADA;
border-radius:5px;
}
input:focus{
background:-moz-linear-gradient(#fff 0%,#dadada 100%);
background:-o-linear-gradient(#fff 0%, #dadada  100%);
background:-ms-linear-gradient(#fff 0%, #dadada  100%);
background:-webkit-linear-gradient(#fff 0%, #dadada  100%);
color:red;
}
#comentarios{
width:300px;
border:solid 1px #DADADA;
border-radius:5px;
background:#f9f9f9;
color:#999;
padding:5px;
margin:5px auto;
text-align:justify;
}
#texto{
width:350px;
border:solid 1px #DADADA;
border-radius:5px;
margin:5px;
padding:5px;
}

Como siempre para un buen documento y una apariencia para el usuario tenemos que aplicar el uso de css con este si te fijas son 4 archivos que hemos creado para lograr obtener este efecto a la vez básico pero muy potente para una aplicación online en tiempo real.

Hasta aquí este mini-tutorial de cómo crear formularios con ajax y php en el siguiente link pueden ver el ejemplo en funcion.

Formulario con ajax y php

Un cordial saludo y hasta la próxima…

Deja un comentario

Tu dirección de correo electrónico no será publicada.