En esta oportunidad crearemos un aplicación web que nos permita insertar datos en la tabla empleados que usamos anteriormente. Bueno como siempre dijo: “pocas palabras, mas acción”.
Quizá te interese: CRUD, insertar, consultar, actualizar y eliminar, con PHP + MySQL + jQuery
Funciones en JavaScript
Bien, como ya tenemos la tabla empezaremos por definir las funciones en javascript, definiremos 3 funciones en un archivo llamado ajax.js:
- objetoAjax( ): Nos creara la instancia del objeto XMLHttpRequest dependiendo del navegador. Siempre haremos uso de ésta función.
- GrabarEmpleado( ): Esta función enviará mediante el método POST los datos al archivo registro.php que realizará la inserción a la base de datos.
- LimpiarCampos( ): Pues fácil limpiará los inputs después de enviar los datos, como para crear un efecto de que se han enviado datos.
ajax.js
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function enviarDatosEmpleado(){
//donde se mostrará lo resultados
divResultado = document.getElementById('resultado');
//valores de los inputs
nom=document.nuevo_empleado.nombres.value;
dep=document.nuevo_empleado.departamento.value;
suel=document.nuevo_empleado.sueldo.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod POST
//archivo que realizará la operacion
//registro.php
ajax.open("POST", "registro.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
//llamar a funcion para limpiar los inputs
LimpiarCampos();
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}
function LimpiarCampos(){
document.nuevo_empleado.nombres.value="";
document.nuevo_empleado.departamento.value="";
document.nuevo_empleado.sueldo.value="";
document.nuevo_empleado.nombres.focus();
}
Grabar los datos
Aquí crearemos un script PHP, al cual llamaremos registro.php que realizará tres funciones importantes:
- Conectarnos con la base de datos,
- Realizar la inserción de los datos a la tabla empleados, y
- Mediante un include llamar al archivo consulta.php que mostrará los registros incluyendo el nuevo ingresado.
A continuación mostramos el código de estos dos archivos: registro.php y consulta.php
registro.php
<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ribosomatic";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//variables POST
$nom=$_POST['nombres'];
$dep=$_POST['departamento'];
$suel=$_POST['sueldo'];
//registra los datos del empleados
$sql="INSERT INTO empleados (nombres, departamento, sueldo) VALUES ('$nom','$dep',$suel)";
mysql_query($sql,$con);
include('consulta.php');
?>
consulta.php
<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ribosomatic";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//consulta todos los empleados
$sql=mysql_query("SELECT * FROM empleados",$con);
//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
while($row = mysql_fetch_array($sql)){
echo " <tr>";
echo " <td>".$row['nombres']."</td>";
echo " <td>".$row['departamento']."</td>";
echo " <td>".$row['sueldo']."</td>";
echo " </tr>";
}
?>
</table>
Formulario Registro de Empleado
Finalmente crearemos el formulario de registro del empleado. Llamaremos a este archivo empleados_registro.php. Sera .php pues haremos uso de un include para llamar al archivo consulta.php que mostrará todos los registros de la tabla empleado.
empleados_registro.php
<html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="nuevo_empleado" action=""
onsubmit="enviarDatosEmpleado(); return false">
<h2>Nuevo empleado</h2>
<p>Nombres
<label>
<input name="nombres" type="text" />
</label>
</p>
<p>Departamento
<label>
<select name="departamento">
<option value="Informatica">Informatica</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Administracion">Administracion</option>
<option value="Logistica">Logistica</option>
</select>
</label>
</p>
<p>Sueldo <strong>S/.</strong>
<label>
<input name="sueldo" type="text" />
</label>
</p>
<p>
<label>
<input type="submit" name="Submit" value="Grabar" />
</label>
</p>
</form>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>
Bueno espero que estos scripts les sirvan de algo a alguien por allí. Consultas o dudas en los comentarios. Pueden descargar el código.
Esta bien todo, solo q te sugiero que le puedas permitir una previsualizacion de la pagina de ejemplo, seria mucho mejor.
Ok jerryman tomaré en consideración tu sugerencia. Gracias
Este ejmplo es muy bueno para empezar con ajax, base de datos y php. A partir de aca ya te das ideas de como funciona… Muy buen post
Excelente… busque mucho por algo como esto, funcion’o de inmediato, les agradezco por compartir estos codigos y tutoriales.
Muy bueno el tutorial, pero como seria para enviar un dato del tipo file, es decir enviar un archivo por POST por medio de ajax ?
seria bueno agregar eso, ya que solo veo que haces el ejemplo con campos tipo texto (text).
saludos y espero no haya incomodado
Estuve intentandolo para la parte administrativa de este CMS propio, pero sin buenos resultados. Aun asi, de conseguir exito escribire sobre ello. Paciencia, todo lo que aprendo, lo comparto. Saludos.
Simplemente muchas gracias por compartir
Muy bueno me ah gustado aprender, estos codigos me han servido bastante, queria aprovechar de hacerte una consulta, resulta que estoy haciendo una pagina de matriculas de alumnos, y pagan en cuotas, por ej 12 cuotas y me dicen fecha de pagos los 5 de cada mes, y quisiera saber si puede haber algo que apenas yo de la primera fecha de pago me arroje las demas fechas de las cuotas restantes.
muchas gracias
Muy interesante tu propuesta. Puedes insertar las demas fechas en una tabla donde se actualizaran los datos de las cuotas, y mediante ajax mostrarlas inmediatamente. Es una idea, espero sirva.
mto massa o tutorial heheh falow!!
El Ejemplo esta muy bueno pero yo lo adacte a una base de datos postgres y cuando inserto la tabla que esta abajo se me desaparece y eso es lo que no quiero, quiero que se refresque sin recargar, gracias
Muy interesante el articulo pero podriamos mejorarlo, usando POO para crear nuestra clase Empleado y una clase para la conecion a la BD, nos ahorrariamos codigo, gracias bye
Perdonen mi insistencia, pero creo que con POO SP nos ahorrariamos bastante codigo, es solo una sugerencia bye
Gracias por sugerencia, mi idea es poco a poco introducirnos en ejemplos mas avanzados. Gracias nuevamente.
Si deseas te mando el mismo codigo que hiciste pero en POO con clases , queda mas optimo y puedes reutilizarlo en otras aplicaciones, dime a que correo te lo envio para que este disponible para todos, gracias bye
tengo problemas para subir los datos de un formulario enviado con el método post pero no puedo enviar los datos de las cajas de texto que tengo
Excelentes ejemplo
Hola, de verdad espero me contestes…
Tengo una duda que se podria hacer si quisiera hacer un setTimeout()
solo a la consulta para que esta se refresque , claro sin afectar la alta.
Esta duda es porque he querido tener un –input type– para mandar un mensage y un box o lo que sea para visualizar la lista de mensages, algo asi como un CHAT.
De antemano muchas Gracias.
Puedes crear una funcion en JavaScript que pida al servidor los nuevos mensajes, y colocar esta funcion en el body onload de la pagina. Algo general sería asi:
function nuevosMensajes() {
/*lo referente a ajax aqui*/
setTimeOut(nuevosMensajes, intervalo)
}
en HTML:
Pero esto tiene su desventaja, ya que es el usuario quien pide al servidor los nuevos mensajes (en un chat, por ejemplo), cuando deberia ser el servidor quien deberia notificarnos de nuevos mensajes. Para ello puedes averiguar una tecnica similar a AJax llamada COMET, que trabaja tambien con el objeto XMLHttpRequest.
Muchas gracias por tu pronta contestación, y voy a ver lo que me dices respecto a COMET.
No se si pudieras ayudarme en lo siguiente: Hago uso de unos CGI’S que estan con webbroker son .exe, todo trabaja bien, SOLO QUE QUIERO que abrirlos con ajax usando ajaxrequest(), pero me aparece el siguiente error : JAVASCRIPT ERROR , el dato necesario para completar esta operacion no esta disponible aun…
De antemano muchas Gracias…
* agregado sobre el post anterior
—Esta es la forma en que llamo al CGI
kardex
—Y esta es la forma como lo recibe ajax.js
ajaxRequest.open(“GET”,pagina); // como parametro de ajaxFuntion
ajaxRequest.send(null);
— MIL DISCULPAS… YA SE PORQUE ?. ES COSA DEL IIS, CON APACHE VA AL 100%
Mil Gracias
Es un ejemplo buenísimo para familiarizarse con MySQL/PHP y Ajax. Gracias a ti lo he entendido un poco más 😉
Yo apenas me estoy adaptando a cambiar de PHP MySQL con javascript simple a PHP MySQL y AJAX y me parece un gran tutorial que asi de simplificado no lo encuentré ni en los “mejores” e-books del azureuz. Muchas gracias por compartir tu experiencia con nosotros.
Excelente script,tengo una duda yo tengo un form similar pero en el onSubmit llamo a una funcion que valida los campos .Como haria para incluir este script pero que se ejecutara una vez que la validacion de los campos sea correcta es decir despues que se ejecutar validaForm() aqui esta parte del html donde te especifico lo d mis dudas:
Codigo:
Odontologia
.
.
.
Donde validaForm() esta en funciones.js y el script de ajax esta en ajax.js,esta bien esto por favor dame una ayudita con esto.
Hay etiquetas html que no estan permitidas. Por favor enviame un email tu consulta haber si puedo ayudar.
Saludos
hola que tal
soy principiante estoy tratando de ingresar empleados, con el codigo que tu tienes
pero no puedo hacer que agregue empleado
y no me manda error.
hola a todos
tengo un formulario en html, el cual recoje los valores ingresados, tengo un codigo php que hace una consulta a una tabla de la base de datos y me muestra la variable que necesito,esto lo hago con un while; pero cuando envia los datos con onsubmit a la funcion enviardatos,me ingresa todos los otros datos menos en que tiene la consulta de la tabla en PHP.
si tienen alguna solucion estare agradecido.
esta probe el actualizar y el eliminar empleados y si me funcionan muy bien, pero cuando probé el registrar, la primera ves registra y lo muestra y cuando quiero registrar otro empleado ya no lo registra. no se que pasa 🙁
esta muy bueno este tema me interesa mucho la informacion gracias
mi amigo, muchas gracias este scrip lo adicionare a las igueinte WEB 😛 gracias, pero si tuvieras un cod mascompleto y mas complejo..:P
Estoy tratando de agregar una funcion de accordion al momento de mostrar los resultados, pero no logro hacer que al momento de cargar nuevamente “consulta.php” funcione el script del acordion. Alguna recomendacion? Sé que debe tener que vber con el init o el dom
Una tontería, pero me llama la atención porque lo he visto en otros ejemplos de esta misma serie; supongo que es una errata y tal vez el script no deja de funcionar, pero … ¿por qué en el archivo ajax.js estas 2 sentencias de la función enviarDatosEmpleado() no terminan en punto y coma?
– esta es la primera:
divResultado.innerHTML = ajax.responseText
– y más adelante esta otra:
ajax.send(…variablesPOST…)
Por cierto, que en el texto introductorio a la función le llamas GrabarEmpleado(), deberías corregir la errata para que la gente no se líe.
Lo siento pero es que soy totalmente novato en JavaScript y a lo mejor me paso de pursita. Muchas gracias por estos ejemplo, intentaré probarlos cuanto antes.
Hola baje el archivo y no me muestra los datos que acabo de ingresar en la tabla pero en la pagina funciona, me gustaria saber por que???
Hola alicia debe checar bien como mandas tu datos a PHP Puede utilizar HTTP_POST o $_POST para recuperar via formulario si es por URL HTTP_GET_VARS o $_GET ok o bien haz el test cuando tu insertas el valor imprimer la variable $sql que es donde inserta el valor y fijate si pasa los valores de la consulta
Saludos
Muchas gracias por tus ejemplos, me ayudaron bastantes.
Tengo una consulta.
Estoy intentando hacer un login, al combinar alguna de tus funciones.
Cuando el usuario ingresar correctamente sus datos, necesito que me direccione a otra pagina. Ésto es lo que necesito ya que no puedo hacerlo.
Te rogaria si es que puedieras ayudarme.
Ejemplo básico pero muy bueno, gracias por el aporte!
Saludos
Marco
Muy buen aporte por lo que me estoy iniciando en ajax … gracias
LA PROGRAMACION ESTA SUPER BIEN, SENCILLO Y SOBRE TODO LA APLICACION ES SUPER LIVIANA…
Me ha resultado muy útil el script… GRACIAS!
Guarda los datos y hace la consulta con el include, como hacer para pasarle una variable a include para que cuando cargue datos, cargue a los de un departamento especifico
tengo una duda el me esta llamandoe el ajax. pero no me esta enviando los datos al registro.php, me lleva los datos vacios, quien me puede ayudar…
Excelente articulo. Sigue adelante!!!
Buena info!!!
Hola amigo, primero quiero agradecer estos excelentes ejemplos de aplicaciones, los cuales ya lo estoy usando. La consulta en la siguinte:
– Se puede hacer todo esto pero solo con con 2 archivos, quiero decir una pagina php que agrupe (el registro, la consulta y el formulario de registro) y por supuesto que llame a la funcion ajax.js ?????
Hola antes que nada agradecer por compartir esta información muy util.. Necesito ayuda… necesito ejecutar código javascript dentro de constultar.php por ejemplo mandar un simple alert pero no me permite…. saludos
Estoy ulizando el codigo para una aplicacion pero solo le aumente un campo y no partir de ahi, ese campo anexado no lo toma como $_post al ajax si llega por que lo imprimo con un alert y ya no puedo generar la insercion HELP!!!
Gracias! me ayudo mucho
Hola! Usé tu ejemplo de prueba y quise agregar un campo más, hice todo lo necesario en cada archivo para que tomara el valor del nuevo vampo, pero al momento de hacer en insert no lo está insertando en la base de datos D: además de que marca un undefined index de la nueva variable al momento de hacer el $_POST y está justamente de la misma manera que los anteriores de nombres, departamento y sueldo… no sé que está sucediendo :S
Hola Mismo problema de lu. Ayuda, plis. Gracias
en que momento se configura al darle click en in cuadro de texto: esta pagina ha inhabilitado la opcion de autocompletar para este formulario
Hola Mismo problema de lu. Ayuda, plis. Gracias
Hola e modificado los archivos para adaptarlos y nose porque razon no me registra nada pero si solo dejo el formulario en un archivo si se registra cuando lo pongo en el archivo donde le necesito no me registra nada necesito ayuda. gracias.
no carga mi include
a sta chvr
Hola amigo, primero quiero agradesele por estos excelentes ejemplos de aplicaciones, los cuales ya lo estoy usando.
le cuento que apenas llevo 60 días tratando de aprender php mysql y me encontré con estos ejemplos los cuales me han dado luces para investigar sobre Ajax mil gracias éxitos
buenos dias estoy aprendiendo programacion y el profesor no ayuda mucho con sus explicaciones, encontre tu codigo y le agrege un calendario para incluir fechas y generar unos reportes por fechas pero al cambiar empleado por alumno no me guarda en la base de datos y ya he probado y no doy con el error si me pudieras orientar te lo agradeceria gracias