Algo sencillo que podemos hacer es utilizar Ajax tienen muchísimos pros, entre ellos que podemos cargar vistas en nuestra página sin recargarla (claro que tiene contras).
Para que tengas mas información de lo que es Ajax te recomiendo que le des una checada a esta página en donde te explicaran todo http://www.ajaxya.com.ar/.
Bueno aqui te voy a ofrecer un ejemplo muy básico de como utilizar Ajax en tu proyecto. El ejemplo va a consistir en un link dentro de la página principal que al hacer click sobre el mostrara una tabla sin que la página se recargue. La tabla que va a mostrar se encuentra en otro archivo.
Comencemos por hacer nuestro archivo principal se llamará index.html
<html lang="en">
<head>
<title>Ejemplo de ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
function cargar(){
var url="tabla.php"
$.ajax({
type: "POST",
url:url,
data:{},
success: function(datos){
$('#tabla').html(datos);
}
});
}
</script>
</head>
<body>
<p>
Ejemplo utilizando ajax: Da click sobre el link para cargar una tabla sin cambiar de página.
</p>
<div>
<a href="#" onclick="cargar();">Ver tabla de alumnos</a>
</div>
<div id="tabla">
</div>
</body>
</html>
Bueno les explicare un poquito el código es un esqueleto de html normal y dentro de la etiqueta body creamos un link con la etiqueta <a> y le estamos indicando que al momento en que hagan click sobre el va a llamar a la función cargar() la cual estamos declarando en el script.
Tambien creamos un div en el que no vamos a poner nada por el momento solo le vamos a crear su id para poderlo identificar yo le puse id="tabla", por que es ahí donde vamos a imprimir el resultado de ajax.
Vamos a la parte del script de javascript que es donde vamos a declarar la función cargar, recuerden que el script debe ir en la sección head del html.
Ahora dentro de la función cargar() es donde vamos a poner el código de ajax. ( $.ajax({}); ), dentro de esta función vemos que tiene diferentes atributos:
type: En este ejemplo estaremos usando el metodo POST aunque en realidad no estamos enviando ninguna variable pero lo puse para que tengan el ejemplo, tambien se pueden pasar datos utilizando el método GET.
data: En caso de que estuviéramos pasando variables aqui seria donde las pondríamos por ejemplo, si quisiera mandar el dato de una maestra la forma de mandarlo seria:
data:{maestra:"angelita"}
donde maestra seria el nombre de la variable que tomaria en mi archivo php, por ejemplo la recibiría de la siguiente manera:
$maestra=$_POST["maestra"]; lo que sería igual a $maestra="angelita"; .
url: Aqui pasamos la ruta de donde se encuentra el archivo que queremos cargar, en este ejemplo mi archivo esta en la misma carpeta que mi archivo html por lo que solo le paso el nombre "tabla.php" el cual declare en la variable url var url="tabla.php".
succes function (datos){}: Lo que se ponga dentro de las llaves es lo que ocurrirá en caso de que se haya realizado con éxito la conexión con el archivo que le pasamos a la función y datos seria lo que estamos recibiendo de este archivo, en mi ejemplo datos seria la tabla que estoy mandando imprimir desde mi archivo "tabla.php". Lo que estoy indicando en este ejemplo es que si la conexión se realizó cón éxito imprima a datos ( la tabla que mando desde tabla.php) dentro del div al que le puse el id="tabla", es importante que indiquen a donde quieren mandar el resultado si no por mas que le den click en link los resultados nunca se mostrarán.
Y recuerden que para que todo funcione tenemos que mandar llamar la libreria jquery en este caso yo estoy mandandolo llamar desde una liga :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>Si no lo agregan les va a marcar errores y no funcionará.
Ahora veamos nuestro archivo tabla.php
<?php
$nombres=array("maria","jose", "luis", "lupita");
$tabla="<table style='text-align:center;margin-top:10px;' border='1'>
<tr>
<td>No. de Alumno</td>
<td>Nombre del Alumno</td>
</tr> ";
$num=1;
foreach($nombres as $td)
{
$tabla.="<tr>
<td>$num</td>
<td>$td</td>
</tr>";
$num++;
}
$tabla.='</table>';
echo $tabla;
?>
Esta super sencillo solo estamos poniendo un array($nombres) con los nombres de los alumnos y vamos a crear una tabla donde se muestren estos nombres y un numero($num) que se va a ir incrementado($num++) para identificar a los alumnos, para mostrarla la mandamos por medio de un echo(echo $tabla).
Y listo ahora cuando des clic sobre el link este llamara a la función cargar que por medio de ajax cargará la tabla que creamos en el archivo tabla.php todo esto sin que se recargue la página.
Te muestro las imagenes de como se ve.
+18.10.22.png)
+18.10.38.png)
puedes crear otro link que haga que desaparezca la tabla
<a href="#" onclick="borrar();" id="cerrar" style="visibility: hidden;">Cerrar tabla</a>
Como puedes ver a este link le configure unos atributos que al otro no, por ejemplo le estoy dando un id(id="cerrar") y le estoy indicando en el estilo que no se muestre (style="visibility:"hidden"), te preguntaras por que lo estoy haciendo invisible, bueno esto es por que por medio del javascript vamos a hacer que se muestre solo cuando la tabla sea mostrada si no pues que caso tendría XD.
Bueno tambien le estoy indicando que al hacer click va a llamar a la función borrar();
Dentro de nuestro script debajo de la función cargar() declaramos la función borrar():
function borrar(){
var d = document.getElementById("tabla");
while (d.hasChildNodes())
d.removeChild(d.firstChild);
document.getElementById("cerrar").style.visibility="hidden";
}
success: function(datos){
$('#tabla').html(datos);
document.getElementById("cerrar").style.visibility="visible";
}Y listo ahora se vería así:
+18.33.49.png)
Intentalo verás que es muy fácil de usar y te ahorrarás muchos dolores de cabeza. Espero que este ejemplo te sirva tanto como a mi me ha servido.
Tus comentarios dudas o aclaraciones acuerdate que son importantes no olvides dejarlos abajo...
"Programar no tiene que ser tan difícil como parece...."
Buenísimo ejemplo!! Muchas gracias me sirvió de mucho! :D
ResponderEliminarQue bueno que te sirvió!! saludos y gracias x pasar por el blog!!
EliminarExcelente ejemplo, yo necesito algo similar, estoy haciendo una página en la que tengo un input de búsqueda que paso a una variable POST y un submit, lo que quiero es que cuando ingrese un dato en ese input, me imprima una tabla de todos los registros que contengan ese dato,la conexióna la BD, la consulta y la elaboración de la tabla ya lo tengo, sólo me falta ver como llamo el script con ajax para el submit y otra cosa es que no entendí muy bien lo de la parte de data, si me pudieras ayudar te lo agradecería.
ResponderEliminarHola disculpe que te conteste hasta hoy, pero gracias a tu comentario me dí a la tarea de hacer un ejemplo te dejo el link http://easy-codigo.blogspot.mx/2013/05/ajax-envio-de-datos-por-post.html espero que te ayude a resolver tu duda con la forma de mandar los datos por POST por el data.
EliminarSaludos :D
Muchas gracias. :D
Eliminartu ejemplo no srivio .... probe haciendolo por mi cuenta con mis variables y mis funciones siguiendo tu ejemplo pero no me dio y opte por copiar tu cidgo y tampoco ..
ResponderEliminarmm que mal copie este código directo al editor y si me funciona, asegurate de que tengas el link de la librería jquery, y pues revisa tu archivo php.
EliminarSi te sale un error publicame que error te sale para ver por que no te funciona.
Una cosa que puedes hacer es correr primero el php si te muestra la tabla entonces el error esta en tu archivo html.
Saludos.
el archivo html y php estan guardados en una carpeta que esta en mi escritorio cuando ejecuto el archivo html y doy click en la liga de ver tablas de alumnos no me muestra nada, el archivo php debe estar en algun servidor o porque no muestra nada
ResponderEliminarPues depende de que servidor tengas, si tienes como yo el xampp, los archivos deben de estar dentro de la carpeta htdocs, si es el wamp creo que es la carpeta www o algo así.
Eliminarya guarde estos dos archivos en la carpeta www del wampserver cuando lo ejecuto aun asi no hace nada , solucion pleaseeee es que necesito entender como funciona ajax :(
Eliminarok haber vamonos por partes es difícil ayudar cuando no ves pero vamos a intentarlo ok. ya tienes tus dos archivos el html y el php, lo primero que tienes que hacer es correr el php para ver que no tenga errores ok. Bueno ya sabes que lo corres
Eliminarlocalhost/tucarpeta/archivo.php
Si lo tienes igual que en este ejemplo te debe mostrar la tabla.
Si es así nos pasamos al html ok. Si te salen errores corrige hasta que te muestre la tabla
Una vez que el archivo php ya funcione correctamente, asegúrate de pasarle bien la ruta del archivo a la variable url de la función del ajax.
EliminarAsegurate tambien de tener el link de la librería de jquery.
ejecuto el archivo php pero no me muestra la tabla, me muestra todo el codigo php, no tengo el link de la libreria jquery como lo descargo
Eliminarya quedo es que no tenia los archivos guardados en carpeta en wamp, tendras mas ejemplos como este, es que necesito aprender ajax :)
EliminarQue bueno que ya te funciono este ejemplo!!!.. ok ahora te recomiendo que hagas el ejercicio que manda datos por post dale click en el ínfice de etiquetas donde dice ajax y ahí te va a salir.
EliminarSi tienen alguna idea en específico de como necesitas el manejo de ajax. dame una idea para generar un ejemplo que te ayude...
sigue practicando y gracias por dejar tus comentarios. es bueno saber que les ayudan los ejemplos... saludos.
Hola que tal, algun ejemplo con base de datos como cuando calificas una pagina y envias comentarios. o algun ejemplo que tengas y pudieses proporcionarlo :) .... xoxo
Eliminaruna pregunta esto que quiere decir
Eliminarif(conexion1.readyState == 4)
Bueno aquí vas a realizar una acción si: el estado de conexión1 (que es, me imagino) la petición al XMLHttpRequest();) es igual a 4 esto quiere decir que la conexión sea completa. generalemnte las variables son así:
Eliminarsi es 0 la petición no ha sido iniciazada:UNINITIALIZED
si es 1 la petición esta cargando: LOADING
si es 2 la petición ya fue cargada: LOADED
si es 3 la petición (no se como expicarlo pero es):INTERACTIVE (jejeje)
si es 4 la petición esta completa: COMPLETE
voy a hacer un ejemplo con este tipo de petición de ajax ok
Eliminarte dejo el link del ejemplo ok http://easy-codigo.blogspot.mx/2013/06/ajax-envio-de-datos-uso-de-ajax-sin-la.html#more
Eliminarhola he intentado usar tu codigo pero no me funciona bien te explico:
ResponderEliminaryo quiero hacer una pagina que cargue un formulario de registro mediante ajax cuando uso tu codigo la respuesta de ajax es buena y los datos me llegan el problema es que no me muestra los datos en la pagina de inicio me podrias ayudar
mm recuerda que en cada página donde quieres usar Ajax debes mandar llamar la libreria de jquery prueba que no te este faltando eso en tu página de Inicio.
Eliminarla librería tengo puesta la que usas tu, al hacer click en mi boton registrar en el network de chrome sale lo siguiente Request URL:http://localhost/practicacarmelo/usuario/insertar.php
ResponderEliminarRequest Method:GET
Status Code:200 OK
es decir que el php le llega no?pero no me lo muestra.
Y ya corriste el php por seperado para ver que si se esta creando bien lo que quieres mostrar. Tambien acuerdate de que este correcto el id del div donde quieres que se muestre el formulario.
Eliminarel link que me has pasado me servira mas adelante cuando inserte los datos de momento solo quiero cargar en el index un formulario que hay en insertar.php.Este es el contenido de insertar.php pero tengo dudas de si es asi como se envia
ResponderEliminaragradezco tu ayuda
porras no sale el contenido del archivo bueno si no te importa podrias ponerme un pequeño ejemplo de como pasar un formulario graciaas!!
Eliminarhice un ejemplo espero que sea parecido a lo que necesitas http://easy-codigo.blogspot.mx/2013/05/ajaxotro-ejemplo-de-cargar-un-modulo.html
EliminarSaludos :D
muchas graciaaas!!!!!!! ya alfin lo conseguii tenia un error al trabajar con la variable dato gracias de nuevo y sigue asi que pones unos ejemplos muy buenos y muy bien explicados gracias y saludos =D
Eliminaral php puse que devolviese solo true echo"true" y tampoco lo hace pero en el network si me llega
ResponderEliminary ya checaste que el id del div donde quieres cargar el archivo php este correcto??
Eliminarsi es correcto ya estoy desesperado jajajaja bueno seguire intentandolo gracias
EliminarEy, que tal, disculpa ya vengo con otra duda, lo que pasa es que estoy creando una página con un select Carrera cuyos option's los cargo desde una BD y también tengo un campo de búsqueda, lo que hago es que cuando ingrese valores en esos campos, usar ajax para que me imprima otros dos select's con los datos filtrados por una consulta SQL con los datos anteriores (Carrera y Búsqueda). Según mis posibilidades, lo hice, pero sólo me está pasando una variable, en este caso carrera, no sé si el problema esté en el .php o es en la función de ajax, si me pudieras ayudar, te lo agradecería.
ResponderEliminarcomo le estas pasando los datos desde el php. por que una es que solo esta resiviendo la primer variable.
EliminarUna solución sería hacer una función independiente para cada campo. y un archivo php independiente para cada función.
De hecho, sólo me está recibiendo la primer variable, porque probé mandándolas a imprimir y sólo me muestra Carrera y la otra me dice que no la he definido. :S
EliminarEs posible usar tu ejemplo con un Dialog Widget de jqueryUI (http://jqueryui.com/dialog/#modal-form), me llama la atencion por que al integrar un submit al widget no puedo guardar la info del form, por que al parecer cargo desde otro archivo pero por GET, y debo hacerlo por POST.
ResponderEliminarMira la verdad no he utilizado es libreria dle jquery pero me imagino que si ha de funcionar por que igual en este ejemplo se utiliza jquery.
EliminarPara pasar datos te recomiendo que cheques el ejemplo del paso de datos por POST por que en este ejmplo no se mandan datos. pero irian dentro de data{variable:"valor de la variable"}
Si el archivo que almacena la tabla tiene mas informacion, ante y despues de donde se imprime la tabla, existe alguna manera de extraer solo la tabla, con el load funciona asi: $("#tabla").load("archivotabla #mitabla");
EliminarLa pagina externa que estamos cargando no puede contener javascripts???, a mi no me cargan los js de la otra pag para cargarla en el contenido
ResponderEliminarSi los acepta nada màs revisa que no repitas las librerìas jquery si estas usando, por que puede tener conflictos si tiene ligas ponlas en la pàgina principal.y no en la pàgina que se esta cargando
Eliminaramigo, estoy trabajando en codeIgniter y resulta que estoy haciendo un sortable con jQueryUI, pero resulta que tengo que guardar los cambios que hagan a esa tabla en la base de datos, llevo 3 días dándole y no he logrado nada.
ResponderEliminarhola.. mm primero me gustaría que me explicarás a que te refieres con un sorteable.
Eliminary pues manejar datos tengo este ejemplo que utiliza Ajax con JQuery que envia datos por Post y realiza una consulta talvez te pueda ayudar a lo que necesitas. Saludos y gracias por pasar al blog!!
te dejo el link del ejemplo http://easy-codigo.blogspot.mx/2013/05/ajax-envio-de-datos-por-post.html
EliminarAmiga, que pena.
Eliminara esto me refiero con sortable: http://jqueryui.com/sortable/
la cuestión es que los registros se cargan de la DB, y al mover un registro (dragDrop), se ejecute el evento, pero onDrag y onDrop todavia no sirven en los navegadores, entonces lo que hice fue un onClick, un boton "Salvar cambios" esos cambios que se realizaron, Ej: item1 se mueve debajo del item3, obtener posiciones de los registros por un DOM, y mandarlas por POST y se guarden en la DB.
eso es lo que estoy haciendo.
Muchas gracias por tu asesoramiento
mira este ejemplito que hice no se si te pueda servir utilice el getBoundingClientRect(), para obtener la posición delos elementos si te das cuenta el primer li es=8 el segundo li=48 y el tercero a 89 talves puedas saber cual se movio dependiendo a la posición les tuve que poner un id a los para poderlos identificar. no se si eso te ayude un poco
Eliminarfunction salvar(){
var texto=""
for (var i=1; i<4; i++){
texto=document.getElementById("li"+i)
var rect = texto.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
alert(rect.top)
}
}
button onclick="salvar()">Guardar cambios /button>
los id de los li quedaron asi id="li1", li2 y asi sucesivamente
no entendí del todo, no se que hace esta función getBoundingClientRect()
Eliminarpuedes darme un ejemplo mas.
hice el ejercicio espero que te pueda servir en algo es una idea http://easy-codigo.blogspot.mx/2013/08/ejemplo-de-sorteable-y-obtener-limites.html
Eliminarmujer muchas gracias
EliminarUna pregunta tengo que hacer lo mismo pero como puedo agregar el resultado a un contenedor ? con un select
ResponderEliminarHaber segun entiendo tienes un select y según lo seleccionado muestras algo en un contenedor. el contenedor es div un id no??
EliminarLoque tienes que hacer es agregar la función onchange a tu select y en java script crear alguna función que detecte lo seleecionado, hagas todo el proceso de envío y recepción de datos y mandar el resultado por medio del id del contenedor.
Hola, siguiendo tu ejemplo no recibo el html de regreso, tengo otro ejemplo con getJSON que si me funciona, pero solo en la primera llamada si vuelvo ausar getJSON con otra solicitud me manda error, tendras idea del porque podrian salir estos errores.
ResponderEliminarmuy buen tuto pero me quedo una duda podria pasar valores mediante el url y capturarlos del otro lado en el php usando el metodo post si se puede podrian dar un ejemplo :)
ResponderEliminarcheca este ejemplo donde se manejo envio de datos por post http://easy-codigo.blogspot.mx/2013/05/ajax-envio-de-datos-por-post.html, no sería mediante la url por que se esta manejando Ajax.
EliminarFelicidades!!! Ary Lugo, que bien explicas todo, hoy si se que con tus ejemplos podré aprender ajax......gracias gracias
ResponderEliminarMuchas gracias por tu comentario me da mucho guto saber que estos ejemplos les sirven para sus proyectos saludos...
Eliminarme gusto mucho tiene lo necesario para que cualquiera pueda entender
ResponderEliminarMuchas gracias por tu comentario!! :D
Eliminaramigo como puedo contactarte tengo un problema q no puedo resolver
ResponderEliminarActualizar
Eliminarla idea es mandar esto--?id_usu=$row[0]\ a otra pagina web llamada actualizar ke esta esperando la fila para llenarm automaticamente las cajas de texto
con este codigo ---
function cargar(){
var url="modificar_usu.php"
$.ajax({
type: "POST",
url:url,
data:{},
success: function(datos){
$('#tabla').html(datos);
}
});
}
si me muestra la tabla en el div pero no me carga los datos mi pregunta es como hacer para validar esto
modificar_usu.php?id_usu=$row[0]
a ver no estoy entiendo muy bien. este trozo de código lo tienes en la página donde vas a mandar los datos y en modificar usuario que haces?? recibes la info y modificas y luego vuelves a mandar datos actualizados. Si es así en el campo data{ }, debes introducir la variable con el campo.
EliminarPara saber si estas recibiendo algun datos de regreso. imprime datos en un alert(datos), te mostrará una ventana de alerta con el contenido.
si excelentes ejemplos felicidades.
ResponderEliminarHola Buen ejemplo, me ayudo mucho, solo que tengo una pregunta como le puedo realizar para evitar cuando cargue la pagina no se valla hasta arriba y que se quede en el mismo lugar. Gracias.
ResponderEliminarMuy buen ejemplo. Me sirvió para aclarar algunas dudas.
ResponderEliminarPor fin un codigo que funciona, Mil Gracias.
ResponderEliminarMe da mucho gusto que te haya servido Saludos!!!!
EliminarGracias me sirvió de mucho!
ResponderEliminarMe has salvado
Gracias esta muy bien,
ResponderEliminarpero ¿hay alguna forma de poner dos div's?
algo así como: success: function(datos, dato2){
$('#tabla').html(datos);
$('#tabla2').html(dato2);
}
Le he dado muchas vueltas y no veo como.
Bien, lo he solucionado y si ha alguien le sirve:
ResponderEliminarHe recargado dos veces la función cargar() dentro de otra función nueva llamando a dos archivos diferentes php.
Luego las llamo con onclick=funcion_nueva()
Desde luego que pasándole valores a las funciones se ahorra mucho código.
De todas formas tu ejemplo me ha ayudado mucho.
Que bueno que has solucionado tu duda y muchas gracias por compartirla!! saludos
ResponderEliminarMuy bueno.
ResponderEliminarMe podrías indicar que código colocar para que sea compatible con todos los navegadores? ya que en internet explorer no se puede ver.
no me funciona me rompo la cabeza le copio igual el codigo lo tengo en htdocs ya hice todo y no funciona me estoy volviendo loco y veo que a mucha gente si le funciona porque a mi noooo ayuda urg!!
ResponderEliminarrecuerda que el ejemplo maneja 2 archivos el index.html y tabla.php
Eliminarrevisa uno por uno haber si alguno te marca algun error y lo corrgies antes de querer hacer funcionar el Ajax.
Tambien recuerda dejar el link de jquery
No funciona la estupidez. Aprende a explicar, belitre.
ResponderEliminarClaro que funciona tonto del nabo
EliminarMuy bueno, muchas gracias.
ResponderEliminarholi
ResponderEliminarMuy claro el ejemplo. Muchas gracias, me sirvió mucho!
ResponderEliminarMuy buen ejemplo pero hay un problema con la integración a PHP pues los formularios necesitan recibir ID para poder realizar la consultas update y tu codigo solo le indicas el archivo en general.
ResponderEliminarGracias amigo, me sirvio mucho
ResponderEliminar