Muchas gracias por sus comentarios me da muchísimo gusto saber que estos ejemplos aunque son muy básicos les ayuden con sus proyectos.
Lo que haremos es algo muy similar al ejemplo anterior cargaremos una tabla usando Ajax, la diferencia es que ahora si pasaremos datos por medio de POST y buscaremos este dato en una tabla de mysql, el resultado de la consulta lo mostraremos en una tabla, el ejemplo se verá como la siguiente imagen.
Cabe mencionar que ya no me voy a adentrar mucho en explicar Ajax por que eso ya lo vimos en el ejemplo anterior, si no lo has visto te recomiendo que le des una leída antes de empezar, aquí te dejo el link:
http://easy-codigo.blogspot.mx/2013/01/ejemplo-de-ajax-cargar-paginas-dentro.html
Ok a lo que nos truje XD.
Primero hagamos el archivo html, en este ejemplo lo llamaremos formulario.html
<HTML>
<HEAD>
<TITLE>Ajax:Post</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
function buscar(){
var url="datos.php"
var user= document.getElementById("nombre").value
$.ajax({
type: "POST",
url:url,
data:{nombre:user},
success: function(datos){
$('#tabla').html(datos);
}
});
}
</script>
</HEAD>
<BODY>
<div><h3 style="color:#08298A">Busqueda de Usuarios</h3></div>
<table>
<tr>
<td><input type="text" id="nombre" /></td>
<td><input type="submit" onclick="buscar();" value="Buscar Usuario" /></td>
</tr>
</table>
<div id="tabla" style="padding-top:10px;"></div>
</BODY>
</HTML>
Como pueden ver es muy sencillito, en cuanto a objetos:
Dentro de una tabla (<table>) para que quede acomodado tengo, un input de tipo text (caja de texto), en donde el usuario va a ingresar el nombre del usuario que esta buscando, a este input le vamos a poner su atributo id="nombre" por que lo vamos a mandar llamar desde la función, y un input de tipo submit (Botón), desde el cual por medio de su atributo onclick podremos mandar llamar a la funcion de Ajax buscar();
Y por último pero muy importante tenemos un div al cual le pusimos a su atributo id el valor de "tabla" y le estoy dando como estilo un margen interior (padding) de 10px, para que no quede muy junto del input.
Ahora el script:
Dentro del header tenemos el script. Primero acuerdense de mandar llamar la librería jquery si no el ejemplo no va a funcionar, yo la mando llamar desde la dirección de googleapis pero si ustedes descargan la librería cambien la ruta por donde lo tengan guardado.
Ahora si la funcion buscar().
Primero tenemos 2 variables:
var url: Esta variable va a ser igual a la ruta donde se encuntra el archivo php con el que vamos a trabajar.
var user: Esta variable va a ser igual al valor de la caja de texto con el id nombre, y ¿como obtenemos el valor?, pues por medio del documen.getElementById("nombre").value, por eso es muy importante que no se les olvide ponerle el id a la caja de texto(input).
ahora si el ajax.
type: Le estamos indicando que el envió va a ser de tipo POST
url: En el campo url vamos a pasarle la variable url (ruta del archivo php al que vamos a mandar el dato).
data:En este campo va la informacion que queremos pasarle al archivo php, en este caso le vamos a pasar el nombre que el usuario ingreso, el cual estamos guardando en la variable user. ¿Como la vamos a pasar?, sencillo entre llaves ponemos el nombre de la variable como la vamos a identificar en el archivo php : y el dato que vamos a pasar.
Ejemplo:{nombre : user}, el primer dato puede ser cualqueir nombre en este archivo no va a afectar en nada en donde lo vamos a utilizar es en el archivo php que sería $_POST["nombre"]. En caso de que sean más datos los que se fueran a pasar se separan por comas, ejemplo: {nombre:user, edad:edad}.
succes:function(datos){}: En caso de que los datos se pasen correctamente y no haya problema con la ruta del archivo php la función entra aquí. datos será lo que mandemos desde el archivo php.
y lo que estoy indicando en $('#tabla').html(datos); es que en el div con el id tabla se va imprimir datos, esto quiere decir que en el div tabla se va a mostrar lo que yo mande del archivo php.
Por eso tambien es muy importante ponerle el id al div, en caso contrario nunca se visualizará nada.
Ok pasemos al archivo php que en mi ejemplo se llama datos.php
<?php
$mysqli=new mysqli("localhost", "root", "","usuarios");
if($mysqli->connect_errno){
echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}
$usuario=$_POST["nombre"];
$resultado=$mysqli->query("SELECT * from users where nombre='$usuario'");
$total=$resultado->num_rows;
if($total>0){
$tabla="<table border=1>";
$tabla.="<tr><td>Nombre</td><td>Apellido</td><td>Edad</td></tr>";
while($row=$resultado->fetch_assoc()){
$tabla.="<tr>" ;
$tabla.="<td>".$row['nombre']."</td>";
$tabla.="<td>".$row['apellido']."</td>";
$tabla.="<td>".$row['edad']."</td>";
$tabla.="</tr>" ;
}
$tabla.="</table>" ;
echo $tabla;
}
else{
echo "No hay usuarios registrados con ese nombre";
}
?>
Antes de empezar para este ejemplo se creó una tabla users con los siguientes campos: nombre, apellido y edad .
Es muy sencillo lo primero que tenemos es la conexión a la base de datos, la cual lo tengo de manera local con el clasico usuario root no tiene password y la base de datos se llama usuarios.
Lo sieguiente que muestra es una condición en caso de que no se pueda conectar a la base de datos manda un error.
Ahora declaré una variable $usuario que es igual a $_POST["nombre"], que es la variable que le estoy mandando desde el data de la función buscar(); (osea el nombre que ingresó el usuario en el formulario)
Despues hago la consulta, voy a buscar toda la información que tenga el usuario cuyo nombre sea igual al que ingresó el usuario.
La siguiente variable declarada $total va a ser igual al número de registros que haya encontrado la consulta, si hay registros creo una tabla en donde voy a mostrar la información de esos usarios que tengo en mi base de datos, y la imprimo con echo $tabla.
En caso de que no haya registros con el nombre que el usuario ingresó osea $total=0 en lugar de mandar la tabla va a mandar un mensaje:
echo "No hay usuarios registrados con ese nombre";
Correlo y pruebalo, si todo funciona como debe se tiene que ver como en la siguiente imagen:
Lo siguiente es añadirle un poquito de estilos para que se vea más bonito.
if($total>0){
$tabla="<table border=0 width='300px'>";
$tabla.="<tr style='background-color:#ccc;'><td><b>Nombre</b></td><td><b>Apellido</b></td><td><b>Edad</b></td></tr>";
while($row=$resultado->fetch_assoc()){
$tabla.="<tr>" ;
$tabla.="<td>".$row['nombre']."</td>";
$tabla.="<td>".$row['apellido']."</td>";
$tabla.="<td>".$row['edad']."</td>";
$tabla.="</tr>" ;
}
$tabla.="</table>" ;
echo $tabla;
}
else{
echo "<span style='color:#B40404;'>No hay usuarios registrados con ese nombre.</span>";
}
Pues es solo quitarle el 1 del border a la tabla y le indicamos que la queremos de 300px de ancho, despues en la fila de los titulos (<tr>) le agregamos al style un color de fondo gris (background-color) y con la etiqueta <b> indicamos que los titulos se vean en negritas.
En la etiqueta donde indicamos que no hay usuarios lo que hacemos es indicarle el color de la fuente con color:#B40404 que es un rojo.
Y listo queda como la imagen
"Programar no tiene que ser tan difícil como parece...."
Hey, muchísimas gracias, de verdad que me ha servido bastante, ya quedó listo!. Y de verdad una felicitación por tu blog, es de mucha ayuda para usuarios algo inexpertos como yo y pues bueno, cualquier duda que tenga me daré una vuelta por acá. Saludos.
ResponderEliminarHola, muy bueno tu tutorial, algo como esto baje, me funciona prefectamente, pero cuanddo lo incluyo a un proyecto que estoy hacienda, no con fines commercial pues no es mi profesion, es solamente con fines de aprender, cuando lo incluyo el buscador no me funciona, voy a probar el tuyo a ver, sino despues te paso el link para que entienda lo que te explico, muchas gracias y felicitaciones
ResponderEliminarjuan
Gracias x dejar tu comentario y pues ojala lo puedas utilizar cualquier duda ya sabes!! a lo mejor de ahí salga algun buen ejemplo para subir y compartir...
EliminarHola Ary, muy bueno tu tutorial, me gustaria saber si se puede hacer lo mismo sin usar jquery, en mi proyecto ya uso jquery pero otra version y al parecer esta creando conflicto por que no me funciona, probe mi php y funciona perfecto. Saludos Ary, me comentas
ResponderEliminarclaro checa este ejercicio que tengo de ajax sin el usode jquery http://easy-codigo.blogspot.mx/2013/06/ajax-envio-de-datos-uso-de-ajax-sin-la.html este funciona usando directo el XMLHttpRequest
EliminarGracias por tu rapida respuesta Ary, lo revisare y te comento, Saludos
EliminarLo probe y funciona perfecto, Muchas gracias Ary!!! Te felicito!!! seguro que aprendere mucho de ajax aqui
Eliminargracias x el tutorial me sirvió d mucho.. ..muy bueno :-) éxitos ...
ResponderEliminarHola Ary.
ResponderEliminarDe verdad tus tutoriales son muy utiles y faciles de entender, gracias por tomarte el tiempo para ayudar a los menos expertos.
Tengo tiempo usando el ajax, y recien me surgio la necesidad de pasar los datos de unos checkbox. pero al momento de pasar la variable no me pasaba nada, revisando por ahi lei en un rincon que no se pueden pasar arreglos de la misma manera que se pasan los demas datos, y ciertamente estoy creando los checkbox con un id y un name en forma de arreglo, segun porque no puedo pasar varios datos dentro de una sola variable. como veo que sabes bastante me gustaria saber si me puedes ayudar, tal vez a ti te ha surgido el mismo inconveniente y me podrias ayudar. de verdad necesito pasar los check en arreglos pero por ahora no he conseguido la manera. gracias de antemano si me pudieses ayudar. te agradeceria tambien tu pronta respuesta.! ;)
Hola, muy buen tutorial ya lo estoy usando, pero tengo otro problemita, necesito hacer una navegación con ajax pero que se pueda usar los botones atras del navegador. agradezco me puesas responder.
ResponderEliminarHola Ary Lugo, yo tengo un problema, como puedo hacer para incrustar o cargar una página hecha en wordpress en otra página wordpress son dos sitios distintos, para que así el cliente pueda ver que lo que se hace en una termine viendosé en la otra y la gente pueda intecatuar en ambas de la misma manera, te dejo los ejemplos.
ResponderEliminarSitio 1: http://www.redahorro.com/listing-search-results/
Sitio 2: http://www.bienestaroaxaca.com.mx/red-ahorro/
Espero me puedas ayudar, te lo agradecería mucho. Saludos
pues funcionaria practicamente igual en url pondrias la direccion del sitio2 en data si no vas a mandar ninguna variable dejas las llaves vacias y datos va a contener todo la pagina la mandas al div o celda dentro de tu sitio 1 donde quieras que aparezca. por medio del id.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarmuy bueno el ejemplo, practico y sencillo c: saludos gracias
ResponderEliminarMuy díficil de explicar algo tan complejo de forma tan clara y simple como lo logras tu. Tienes talento de pedagogo. Muchas gracias! Maravilloso y bien documentado tu blog...y tus lecciones..
ResponderEliminarno funciona tu huea conchetumare
ResponderEliminar