Básicamente el ejemplo consta de una página principal que tiene 3 secciones 2 texto y en una un botón para registrar o entrar. al oprimir ese botón mostrará el formulario, sin recargar la página. Donde si refrescará la página es al cerrar el formulario para que vuelva a crear el botón de registrar ok. se vería así:
 |
| página principal |
 |
| página principal despues de oprimir el botón. |
ok solo son 2 archivos la página principal html y el archivo php en donde crearé el formulario, ahora a lo mejor se preguntan ¿tiene que ser solo php? no tambien pueden mandar llamar otro archivo html. ok
el archivo html("página principal") sería la siguiente:
<HTML>
<HEAD>
<TITLE>Mi página principal</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
function cargar(){
var url="registro.php"
$.ajax({
type: "POST",
url:url,
data:{},
success: function(datos){
$('#registro').html(datos);
}
});
}
</script>
</HEAD>
<BODY style="margin:0;">
<div style="width:100%;height:100%;text-align:center">
<div style="width:960px;height:40px;background-color:#F3F781;margin:auto;padding:5px;" >
<h3><span style="text-align:left;">Mi página principal</span></h3>
</div>
<div style="width:960px;height:10px;margin:auto">
<hr />
<br />
<div style="float:left;width:300px;height:200px;background-color:#A9E2F3;padding:5px;border:1px solid;">
<p>Aqui va algun texto no importa cual solo es un ejemplo de un modulo</p>
</div>
<div style="float:left;width:300px;height:200px;padding:5px;border:1px solid;background-color:#A9E2F3;margin-left:5px;">
<p>Aqui va otro texto no importa cual solo es otro ejemplo de otro modulo</p>
</div>
<div style="float:right;width:300px;height:200px;padding:5px;border:1px solid;" id="registro">
<br />
<button style="width:100px;height:50px;" onclick="cargar();">Registrate</button>
</div>
</div>
</div>
</BODY>
</HTML>
Ok no hay mucho que explicar solo son unos cuantos divs, con su respectivo diseño para que se vea acomodado, el float es para que los divs puedan aparecer uno de lado de otro.
Ahora nos vamos a concentrar en el tercer div donde tenemos el botón de Registrar.
Al div le pusimos el 'id=registro' esto es muy importante ok por que lo vamos a usar para cargar ahí el contenido del archivo php. Y en la función onclick del botón mandamos llamar la función "cargar();"
En la función cargar que aparece en la sección Header del html, vamos a declarar una variable url en donde vamos a poner la ruta del archivo php, yo tengo los dos archivos en la misma ruta por eso solo pongo el nombre y la extencion 'registro.php', pero si tiene el archivo php en otra ruta, se debe escribir completa
ejemplo: 'carpeta/registro.php' ó '../carpeta/registro.php'
ahora type:"POST" aunque tambien pueden ser GET, no le estemos mandando datos, pero si le estamos pidiendo una respuesta por lo que esta dato es obligatorio ok.
despues viene la url y ahí le vamos a pasar la variable que declaramos que se llama url. Ahora si no quieres declarar la variable les puedes pasar directamente la ruta en esta parte quedaría así.
url:"registro.php" ó url:"carpeta/registro.php"
despues viene data y las llaves vacias esto es por que no le vamos a pasar ninguna variable.
Ahora viene lo bueno si pudo encontrar el arhivo regitro.php entonces se va a traer lo que tenga ese archivo y lo voy a imprimir en el div registro (que es el div donde pusimos el botón de registrar).
'datos' es igual a lo que contenga el archivo php(registro.php)
eso sería todo en el archivo html.
El archivo php sta super sencillo.
<?php
$formulario="<table style='width:250px;margin:auto'>";
$formulario.="<tr ><td style='text-align:center;' colspan='2'><b>Formulario de Registro</b></td></tr>";
$formulario.="<tr>
<td>Nombre:</td><td><input type='text' name='nombre' /></td>
</tr>";
$formulario.="<tr>
<td>Contraseña:</td><td><input type='text' name='password' /></td>
</tr>";
$formulario.="<tr colspan='2'><td><input type='submit' value='entrar'></td></tr>";
$formulario.="</table>";
$formulario.="<br/><a href='#' onclick='window.location.reload();'>Cerrar</a>";
echo $formulario;
?>
Como pueden ver solo es una variable concatenada $formulario. a la que le vamos a dar el valor de una tabla.
Tambien le agregue un link <a>cerrar</a> al que le puse en su función onclik 'window.location.reload()' esto es en js para que recargue la página lo que hará será quitar el formulario y volver a crear el botón de Registrar.
Al final solo mandamos imprimir esa variable echo $formulario;
Y listo, eso es todo acuerdense que es muy importante que en su página principal agreguen el link a la librería de jquery. En este ejemplo aparece arriba del script de la función cargar();
Espero les funcione. Gracias por pasar al blog y pues práctiqun la verdad es muy sencillo y sirve muchisimo.
"Programar no tiene que ser tan difícil como parece...."
hola que tal, en este ejemplo no se utiliza ajax?
ResponderEliminarsip. tambien es parecido al primero de mostrar la tabla
Eliminaraun no me queda claro, ajax hace que no se recargue la pagina? es que al oprimir el boton cerrar se recarga la pagina o como trabaja ajax?
EliminarSi Ajax funciona sin recargar la página. Si te fijas bien lo que utiliza Ajax es el boton de registrar y de hecho arriba explico la liga de cerrar si actualiza la página ese no usa ajax ese lo ocupo para regresar la página al estado inicial se refresca y por lo tanto vuelve a crear el botón de registrar.
EliminarCuando le das click al boton de registrar te muestra el formulario sin recargar la página eso es el uso de Ajax.
EliminarSi no quieres que cierre el formulario para que no se refresque la página no lo pongas y que el usuario lo haga cuando quiera o cuando cambie de página.
en que parte del codigo se refleja ajax para que no recargue la pagina , es que aun no me queda claro :(
Eliminarsi me ha quedado claro que dependiendo del navegador para realizar conexion, pero para que no se recargue la pagina eso si no me ha quedado claro :(
Mira el asunto aqui es que Ajax en sí no es una clase o un código especifico Ajax es una combinación de tecnolgías que pueden ser XHTML, CSS, DOM, XML, XSLT , JSON, XMLHttpRequest y JavaScript que las une todas. Entonces lo que ajax hace es que realiza el intercambio de información con el servidor en un segundo plano evitando la recarga de la página. por que crea como un nivel intermedio entre el lado cliente y el lado servidor.
Eliminary es lo que hace que las paginas no se recarguen, me ha quedado claro, de antemano muchas gracias por todas las explicaciones, el ejemplo del formulario y la gran paciencia en cada una de las explicaciones. :)
Eliminarvamos a probar que tal va! gracias por compartir
ResponderEliminar