Ejemplo:
En el siguiente código crearemos un proyecto y ordenaremos los archivos con una estructura de carpetas para separar en cierta forma las distintas funciones dentro del proyecto, la siguiente imagen ilustrará lo mencionado anteriormente:
el código del archivo index.html es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>AJAX JQuery</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/style.css">
<script src="javascript/jquery.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="well">
<button class="btn btn-success btn-lg" data-toggle="modal" href='#agregar'>Agregar Persona</button>
<table class="table table-condensed table-hover">
<thead>
<tr class="info">
<th>RUT</th>
<th>NOMBRE</th>
<th>EMAIL</th>
<th>TELÉFONO</th>
<th>CARGO</th>
<th>ACCIÓN</th>
</tr>
</thead>
<tbody id="tabla-registro">
<!-- contenido dinámico -->
</tbody>
</table>
</div>
</div>
<!-- Modal ingreso persona -->
<div class="modal fade" id="agregar">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Formulario para ingresar persona</h4>
</div>
<div class="modal-body">
<form id="form-ingreso">
<legend>Nuevo Registro:</legend>
<div class="form-group">
<input required type="text" class="form-control" placeholder="Ingrese el RUT" name="rut">
</div>
<div class="form-group">
<input required type="text" class="form-control" placeholder="Ingrese Nombre con Apellido" name="nombre">
</div>
<div class="form-group">
<input required type="email" class="form-control" placeholder="Ingrese Correo Electrónico" name="email">
</div>
<div class="form-group">
<input required type="text" class="form-control" placeholder="Ingrese Telefono Móvil" name="telefono">
</div>
<div class="form-group">
<select required name="cargo" class="form-control btn btn-default">
<option value="12">Jefe de Proyecto</option>
<option value="23">Analista</option>
<option value="32">Desarrollador</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success btn-lg" value="Ingresar">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fin Modal ingreso persona -->
<script src="ajax/create.js"></script>
<script src="ajax/delete.js"></script>
<script src="ajax/read.js"></script>
<script src="ajax/update.js"></script>
</body>
</html>
Se puede ver que incorporamos Bootstrap en nuestro proyecto y además tendremos varios archivos JavaScript y estos son los que usarán la técnica AJAX, así se verá el archivo descrito en conjunto con sus modales.
Modal de ingreso:
Teniendo en cuenta que el ejercicio es hacer un CRUD (Create Read Update Delete) mediante el uso de AJAX ahora estudiaremos el archivo "ajax/create.js" y el "server/create.php", el archivo JavaScript usará JQuery para poder hacer peticiones AJAX a "server/create.php" y esperar la respuesta para agregar elementos al HTML, de la siguiente forma:
$('#form-ingreso').submit(function(event){
event.preventDefault();
$.post('../server/create.php',
$('#form-ingreso').serialize(),
function(dato){
$("#agregar").modal('hide');
if(dato.exito){
console.log(dato);
var variable="";
if(dato.cargo == 12) variable="Jefe Proyecto";
if(dato.cargo == 23) variable="Analista";
if(dato.cargo == 32) variable="Desarrollador";
$('#tabla-registro').after(
'<tr id="fila_'+dato.rut+'">'+
'<td>'+dato.rut+'</td>'+
'<td>'+dato.nombre+'</td>'+
'<td>'+dato.email+'</td>'+
'<td>'+dato.telefono+'</td>'+
'<td>'+variable+'</td>'+
'<td> <button value=\''+dato.rut+'\' type="button" class="btn btn-info">Actualizar</button> - <a id="eliminar" class="btn btn-danger">Eliminar</a></td>'+
'</tr>'
);
}else{
alert('Error al recibir la respuesta del Servidor');
}
});
});
Para poder entender este código también debemos entender el "server/create.php", puesto que estan relacionados directamente por la petición del archivo "ajax/create.js", el código del lado del servidor es el siguiente:
<?php
require('connection.php');
$db= new ConnectionDB();
$rut = $db->escape_string($_POST['rut']);
$nombre = $db->escape_string($_POST['nombre']);
$mail = $db->escape_string($_POST['email']);
$telefono = $db->escape_string($_POST['telefono']);
$cargo = $db->escape_string($_POST['cargo']);
/* Enviamos la instrucción SQL que permite ingresar
los datos a la BD en la tabla contactos */
if($db->query("insert into contacto values ('$rut','$nombre','$mail','$telefono', '$cargo');")){
header('Content-Type: application/json');
echo json_encode(array('exito'=>true, 'rut'=>$rut,'nombre'=>$nombre, 'email'=>$mail,'telefono'=>$telefono,'cargo'=>$cargo));
}else{
die("Ocurrio UN problema al ejecutar la consulta de insercion en BBDD error [ ".$db->error." ]");
}
?>
Después de tener estos códigos funcionando podremos agregar un nuevo registro en nuestro sistema de la siguiente forma:
Dejando el siguiente resultado:
Toda las instrucciones necesarias para ejecutar el proyecto se encuentran en la actividad de la guia, puesto que falta mencionar el archivo de conexion a la base de datos.