You are on page 1of 6

INSERTAR DATOS EN MYSQL CON PHP USANDO

AJAX PARA EVITAR RECARGAR LA PGINA


Un gran inconveniente a la hora de insertar datos en una pgina web, es tener que volver a cargar la pgina completa para ver los resultados,
algo que podemos evitar usando Ajax.
Para conseguirlo, Ajax recoger los datos de nuestro formulario de insercin a la base de datos y los enviar a otra pgina PHP que se
encarga de realizar la insercin. En esta entrada veremos cmo insertar datos en MySQL con PHP y AJAX.
De esta forma, la pgina web no necesita recargarse para mostrar los datos insertados, ni siquiera para insertarlos simplemente.
En el ejemplo de demostracin usar una base de datos con la siguiente estructura de tablas.

CREATE TABLE IF NOT EXISTS `empleados` (


`nombre` VARCHAR(255) NOT NULL,
`apellido` VARCHAR(255) NOT NULL,
`web` VARCHAR(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
El ejemplo, tratar de mostrar una lista con empleados y sus datos, y un formulario de alta de empleados. Al final del ejercicio quedar as.
El ejemplo consta de 4 archivos.
empleados_registro.php: Muestra el formulario de insercin y llama a la funcin en Ajax.
ajax.js: Realiza la recogida de datos del formulario y lo enva al script en PHP.
registro.php: Recoge los datos de la funcin en Ajax y llama a la consulta de los datos.
consulta.php: Realiza una consulta en la base de datos despus de insertar los datos, este script se muestra en empleados_registro.php.
Una vez explicada la estructura y funciones de cada archivo, veremos el cdigo de cada archivo. El cdigo es bastante sencillo y
viene comentado para explicar todas las funciones.
empleados_registro.php

<html>
<head>
<title>Registro de empleados</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>
<table>
<tr>
<td>Nombres</td><td><label><input name="nombre" type="text" /></label></td>
</tr>
<tr>
<td>Apellido</td><td><label><input type="text"
name="apellido"></label></td>
</tr>
<tr>
<td>Web</td><td><label><input name="web" type="text" /></label></td>
</tr>
<tr>
<td>&nbsp;</td><td><label><input type="submit" name="Submit" value="Grabar"
/></label></td>
</tr>
</table>
</form>

<div id="resultado"><?php include('consulta.php');?></div>

</body>
</html>

ajax.js
// JavaScript Document

// Funcin para recoger los datos de PHP segn el navegador, se usa siempre.
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;
}

//Funcin para recoger los datos del formulario y enviarlos por post
function enviarDatosEmpleado(){

//div donde se mostrar lo resultados


divResultado = document.getElementById('resultado');
//recogemos los valores de los inputs
nom=document.nuevo_empleado.nombre.value;
ape=document.nuevo_empleado.apellido.value;
web=document.nuevo_empleado.web.value;

//instanciamos el objetoAjax
ajax=objetoAjax();

//uso del medotod POST


//archivo que realizar la operacion
//registro.php
ajax.open("POST", "registro.php",true);
//cuando el objeto XMLHttpRequest cambia de estado, la funcin se inicia
ajax.onreadystatechange=function() {
//la funcin responseText tiene todos los datos pedidos al servidor
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 a registro.php para que inserte los datos
ajax.send("nombre="+nom+"&apellido="+ape+"&web="+web)
}

//funcin para limpiar los campos


function LimpiarCampos(){
document.nuevo_empleado.nombre.value="";
document.nuevo_empleado.apellido.value="";
document.nuevo_empleado.web.value="";
document.nuevo_empleado.nombre.focus();
}
registro.php
<?php

//Configuracion de la conexion a base de datos


$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ajax";

$con = mysql_connect($bd_host, $bd_usuario, $bd_password);


mysql_select_db($bd_base, $con);

//variables POST
$nom=$_POST['nombre'];
$ape=$_POST['apellido'];
$web=$_POST['web'];

//registra los datos del empleados


$sql="INSERT INTO empleados (nombre, apellido, web) VALUES ('$nom', '$ape', '$web')";
mysql_query($sql,$con) or die('Error. '.mysql_error());

include('consulta.php');
?>
consulta.php
<?php

//Configuracion de la conexion a base de datos


$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ajax";

$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);
?>
<table style="color:#000099;width:400px;">
<tr style="background:#9BB;">
<td>Nombre</td>
<td>Apellido</td>
<td>Web</td>
</tr>
<?php
while($row = mysql_fetch_array($sql)){
echo "<tr>";
echo "<td>".$row['nombre']."</td>";
echo "<td>".$row['apellido']."</td>";
echo "<td>".$row['web']."</td>";
echo "</tr>";
}
?>
</table>