CRUD PHP usando AJAX jQuery [script completo]

<form class="form-horizontal" id="clienteForm">
<div class="form-group row">
<label class="control-label col-sm-2" for="nombre">Nombre:</label>
<div class="col-sm-10"> 
<input type="text" name="nombre" class="form-control" id="nombre" placeholder="Ingrese nombre">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Ingrese email" name="email">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Pais:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pais" placeholder="Ingrese pais" name="pais">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pais">Password:</label>
<div class="col-sm-10"> 
<input type="text" class="form-control" id="pwd" placeholder="Ingrese password" name="pwd">
</div>
</div>
<div class="form-group row"> 
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="registro">Registrar cliente</button>
</div>
</div>
</form>

2) dbcon.php

Este fichero se encargará de realizar la conexión con la base de datos usando MySQLi. Además, se usará variables para identificar las credenciales de acceso.

<?php

// Creamos las variables de conexión
$servername = "localhost";
$username = "root";
$password = "";
$database = "baul_demo";
// Creamos la conexion con MySQL
$con = new mysqli($servername, $username, $password, $database);
// Revisamos la conexión
if ($con->connect_error) {
die("Conexión fallida: " . $con->connect_error);
}

?>

3) accion.php

Este archivo se ejecutará cuando el usuario crea un nuevo registro y el identificador llamado «#registro” que esta declarado en el botón «Registrar cliente» desencadenará el llamado al AJAX en donde registrará los valores del formulario en la tabla clientes.
Por lo tanto, este fichero posee la conexión a MySQL y ejecutara la consulta «INSERT INTO» para almacenar la información en un nuevo registro.

<?php
// incluimos la conexión a MySQL

include_once('dbcon.php');

// variables para insertar datos a mysqli
$nombre = strip_tags(trim($_POST["nombre"]));
$nombre = str_replace(array("\r","\n"),array(" "," "), $nombre);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$pais = filter_var(trim($_POST["pais"]), FILTER_SANITIZE_STRING);
$password = trim(md5($_POST['password']));

$query = "INSERT INTO clientes (nombre, email, pais, password) 
VALUES('$nombre', '$email', '$pais', '$password')";

if ($con->query($query)) { 
return true;
}else{
return false;
}

?>

<?php
// incluimos la conexión
include "dbcon.php";

// Variables para editar la tabla por id
$id = $_POST['editar_id'];
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$pais = $_POST['pais'];
$password = md5($_POST['password']);


// SQL para actualizar un registro 
$query = "UPDATE clientes SET nombre='{$nombre}',email='{$email}',pais='{$pais}', password='{$password}' WHERE id='{$id}'";
if ($con->query($query)) {
echo 1;
}else{
echo 0;
}
?>

5) extraer.php

Para poder editar un registro AJAX solicitara información a través de este fichero para poblar el formulario con datos de MySQL y poder reemplazar la información que el usuario final desea. Sin embargo, extraerá la información a través de una ID para identificar un solo registro.

<?php
// incluimos fichero de conexión
require_once('dbcon.php');

if (isset($_POST['editarId'])) {
$editarId = $_POST['editarId'];
}
// extraer tabla clientes..

$sql = "SELECT * FROM clientes WHERE id = {$editarId}";
$query = $con->query($sql);
if ($query->num_rows > 0) {
$output = "";
while ($row = $query->fetch_assoc()) {
$output .= "<form>
<div class='modal-body'>
<input type='hidden' class='form-control' id='editarId' value='{$row['id']}'>
<div class='form-group'>
<label class='control-label' for='nombre'>Nombre:</label>
<input type='text' class='form-control' id='editarNombre' value='{$row['nombre']}'>
</div>
<div class='form-group'>
<label class='control-label' for='email'>Email:</label>
<input type='text' class='form-control' id='editarEmail' value='{$row['email']}'>
</div>
<div class='form-group'>
<label class='control-label' for='pais'>Pais:</label>
<input type='text' class='form-control' id='editarPais' value='{$row['pais']}'>
</div>
<div class='form-group'>
<label class='control-label' for='pwd'>Password:</label>
<input type='text' class='form-control' id='editarPassword' value='{$row['password']}'>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Cerrar</button>
<button type='button' class='btn btn-info' id='editarSubmit'>Guardar cambios</button>
</div>
</form>"; 
}
$output .="</table>";
}
echo $output;

?>

6) ver.php

En el fichero index.php debajo del formulario se mostrará esta información que AJAX solicitará para mostrar todos los registros de la tabla de manera dinámica. Por lo tanto, se realizará una consulta SQL.

<?php
// incluimos el fichero de conexión

require_once('dbcon.php');

// extraemos la informacion de la tabla clientes..
$sql = "SELECT * FROM clientes";
$query = $con->query($sql);
if ($query->num_rows > 0) {
$output = "";
$output .= "<table class='table table-hover table-striped'>
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Email</th>
<th>Pais</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>";
while ($row = $query->fetch_assoc()) {
$output .= "<tbody>
<tr>
<td>{$row['id']}</td>
<td>{$row['nombre']}</td>
<td>{$row['email']}</td>
<td>{$row['pais']}</td>
<td><button class='btn btn-success btn-sm editar-btn' data-id='{$row['id']}' data-toggle='modal' data-target='#exampleModal'>Editar</button></td>
<td><button class='btn btn-danger btn-sm borrar-btn' data-id='{$row['id']}'>Borrar</button></td>
</tr>
</tbody>";
}
$output .="</table>";
echo $output;
}else{
echo "<h5>Ningún registro fue encontrado</h5>";
}

?>

7) borrar.php

Al presionar el botón «Borrar» jQuery a través de AJAX llamara a este fichero para validad y eliminar el determinado registro a través de una ID verificara la existencia del registro y luego ejecutar la consulta SQL llamado «DELETE«,

<?php
// declarar la conexión
require_once('dbcon.php');

if (isset($_POST['borrarId'])) {
$borrarId = $_POST['borrarId'];
}

// revisar si existe el registro en la tabla
$sql = "SELECT * FROM clientes WHERE id = {$borrarId}";
$result = $con->query($sql);

if ($result->num_rows > 0) {
// borramos el registro de la tabla
$query = "DELETE FROM clientes WHERE id = {$borrarId}";

if ($con->query($query)) {
echo 1;
exit;
}else{
echo 0;
exit;
}
}

?>

$(document).ready(function(){
// recuperar datos de la tabla clientes..
function loadTableData(){
$.ajax({
url : "ver.php",
type : "POST",
success:function(data){
$("#tableData").html(data);
}
});
}
loadTableData();
$("#registro").click(function(e){
e.preventDefault();
var nombre = $("#nombre").val();
var email = $("#email").val();
var pais = $("#pais").val();
var pwd = $("#pwd").val();
if(nombre !=="" && email !=="" && pais !=="" && pwd !==""){
$.ajax({
url : "accion.php",
type: "POST",
cache: false,
data : {nombre:nombre,email:email,pais:pais, pwd:pwd},
success:function(data){
alert("Datos insertados correctamente");
$("#clienteForm")[0].reset();
loadTableData();
},
});
}else{
alert("Todos los campos son obligatorios");
}
});

// Eliminar registro a MySql desde PHP usando jQuery AJAX
$(document).on("click",".borrar-btn",function(){
if (confirm("¿Estás seguro de eliminar esto?")) {
var id = $(this).data('id');
var element = this;
$.ajax({
url :"borrar.php",
type:"POST",
cache:false,
data:{borrarId:id},
success:function(data){
if (data == 1) {
$(element).closest("tr").fadeOut();
alert("Registro de usuario eliminado correctamente"); 
}else{
alert("Identificación de usuario inválida");
}
}
});
}
});

// Edite el registro a mysqli desde php usando jquery ajax
$(document).on("click",".editar-btn",function(){
var id = $(this).data('id');
$.ajax({
url :"extraer.php",
type:"POST",
cache:false,
data:{editarId:id},
success:function(data){
$("#editarForm").html(data);
},
});
});

// User record update to mysqli from php using jquery ajax
$(document).on("click","#editarSubmit", function(){
var editar_id = $("#editarId").val();
var nombre = $("#editarNombre").val();
var email = $("#editarEmail").val();
var pais = $("#editarPais").val();
var password = $("#editarPassword").val();

$.ajax({
url:"actualizar.php",
type:"POST",
cache:false,
data:{editar_id:editar_id,nombre:nombre,email:email,pais:pais,password:password},
success:function(data){
if (data ==1) {
alert("Registro de usuario actualizado correctamente");
loadTableData();
}else{
alert("Algo salió mal"); 
}
}
});
});
});

Página principal completo

Ahora crearemos una página de índice simple para mostrar los registros de tabla de usuarios después de insertar en la tabla de usuarios mediante la obtención de valor de la base de datos.