Inicio AJAX AJAX, PHP, MySQL – Registro de datos

AJAX, PHP, MySQL – Registro de datos

57 5547

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".

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.

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

57 COMENTARIOS

  1. 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

  2. Excelente… busque mucho por algo como esto, funcion’o de inmediato, les agradezco por compartir estos codigos y tutoriales.
    achorao

  3. 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

  4. 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. risas

  5. 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

  6. 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. risas

  7. 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 achorao

  8. 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

  9. 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

  10. 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.

  11. 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:

    < body onload="nuevosMensajes()" >

    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.

  12. 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…

  13. * agregado sobre el post anterior
    —Esta es la forma en que llamo al CGI
    < a style=\"text-decoration:underline;cursor:pointer;\" onclick="ajaxFunction('kardex.exe')" / > kardex < / a >
    —Y esta es la forma como lo recibe ajax.js
    ajaxRequest.open(“GET”,pagina); // como parametro de ajaxFuntion
    ajaxRequest.send(null);

  14. 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.

  15. 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.

  16. 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.

  17. 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.

  18. 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 :(

  19. 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

  20. 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.

  21. 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???

  22. 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

  23. 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.

  24. 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

  25. 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 ?????

  26. 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

  27. 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!!!

  28. 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

  29. en que momento se configura al darle click en in cuadro de texto: esta pagina ha inhabilitado la opcion de autocompletar para este formulario

  30. 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.

  31. 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

  32. 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

Deja un comentario