Estoy haciendo un proyecto utilizando el (Modelo Vista Controlador) en el cual tengo dos carpetas

“app” , “assets” y tengo un archivo llamado “index”. En ese archivo tengo este código:

<?php
require_once "app/controller/controladorVistas.php";

$vistas = new controladorVistas();

$vistas -> ctrVistas();
?>

En la carpeta “app” tengo tres carpetas que son: “controller”, “model” y “view”.

En la carpeta “controller” tengo dos archivos: “controladorPersona.php” y “controladorVistas.php”.

En el archivo “controladorVistas.php” tengo este código:

<?php

//Para acceder a los archivos dentro de las carpetas MVC

class ControladorVistas{
public function ctrVistas(){
Include "app/view/index.php";
}
}
?>

En el archivo “controladorPersona.php” tengo este código:

<?php
require_once "../model/modeloPersona.php";
class controlador{
public function AgregarDatos($datos){
$respuesta = modelo::AgregarDatos($datos);
return $respuesta;
}
public function listarDatos(){
$respuesta = modelo::listarDatos();
return $respuesta;
}
public function consultarDatos($PERSONA_ID){
$respuesta = modelo::consultarDatos($PERSONA_ID);
return $respuesta;
}
public function ActualizarDatos($datos){
$respuesta = modelo::ActualizarDatos($datos);
return $respuesta;
 }
}
if(isset($_POST["opcion"])){
if($_POST["opcion"] === "AgregarDatos"){
$NOMBRE = (isset($_POST["NOMBRE"])) ? $_POST["NOMBRE"] : null;
// esto captura los datos probenientes del formulario
$DOCUMENTO = (isset($_POST["DOCUMENTO"])) ? $_POST["DOCUMENTO"]
: null;
$EDAD = (isset($_POST["EDAD"])) ? $_POST["EDAD"] : null;
$TELEFONO = (isset($_POST["TELEFONO"])) ? $_POST["TELEFONO"] :
null;

$datos = [
"NOMBRE" => $NOMBRE,
"DOCUMENTO" => $DOCUMENTO,
"EDAD" => $EDAD,
"TELEFONO" => $TELEFONO
];
$respuesta = new controlador();
$respuesta = $respuesta -> AgregarDatos($datos);

if($respuesta === true){

echo 1;
}else{
echo 2;
}
}
else if($_POST["opcion"] === "listarDatos"){
$respuesta = new controlador();
$respuesta = $respuesta -> listarDatos();
echo json_encode($respuesta, JSON_UNESCAPED_UNICODE);

}
else if($_POST["opcion"] === "consultarDatos"){
$PERSONA_ID = (isset($_POST["persona_ID"])) ?
$_POST["persona_ID"] : null;

$respuesta = new controlador();

$respuesta = $respuesta -> consultarDatos($PERSONA_ID);
echo json_encode($respuesta, JSON_UNESCAPED_UNICODE);
}
else if($_POST["opcion"] === "ActualizarDatos"){
$NOMBRE = (isset($_POST["persona_NOMBRE"])) ?
$_POST["persona_NOMBRE"] : null;
 $DOCUMENTO = (isset($_POST["persona_DOCUMENTO"])) ?
$_POST["persona_DOCUMENTO"] : null;
$EDAD = (isset($_POST["persona_EDAD"])) ? $_POST["persona_EDAD"]
: null;
$TELEFONO = (isset($_POST["persona_TELEFONO"])) ?
$_POST["persona_TELEFONO"] : null;
$ID = (isset($_POST["persona_ID"])) ? $_POST["persona_ID"] :
null;

$datos = [
"NOMBRE" => $NOMBRE,
"DOCUMENTO" => $DOCUMENTO,
"EDAD" => $EDAD,
"TELEFONO" => $TELEFONO,
"ID" => $ID
];
$respuesta = new controlador();
$respuesta = $respuesta -> ActualizarDatos($datos);
if($respuesta === true){
echo 1;
}else{
echo 2;
}
}
else if($_POST["opcion"] === "EliminarDatos"){

}
}
?>

En la carpeta “model” tengo dos archivos: “conexion.php” y “modeloPersona.php”

En el archivo “conexion.php” tengo este código:

<?php
class conexion{
public static function conectar(){
$link = new PDO("mysql:host=localhost; dbname=crud", "root",
"");
return $link;
}
}
?>

En el archivo “modeloPersona.php” tengo este código:

<?php

require_once "conexion.php";

class modelo{
static public function AgregarDatos($datos){
$x = conexion::conectar()->prepare ("INSERT INTO
personas(persona_NOMBRE, persona_DOCUMENTO, persona_EDAD, persona_TELEFONO)
values ( :NOMBRE, :DOCUMENTO, :EDAD, :TELEFONO)");

$x -> bindParam(":NOMBRE", $datos["NOMBRE"], PDO::PARAM_STR);

$x -> bindParam(":DOCUMENTO", $datos ["DOCUMENTO"],
PDO::PARAM_STR);
$x -> bindParam(":EDAD", $datos["EDAD"], PDO::PARAM_INT);
$x -> bindParam(":TELEFONO", $datos["TELEFONO"],
PDO::PARAM_STR);
if($x -> execute()){
return true;
}else{
return false;
}
}

static public function listarDatos(){

$x = conexion::conectar()->prepare("SELECT persona_ID,
persona_NOMBRE, persona_DOCUMENTO, persona_EDAD, persona_TELEFONO FROM
personas");
$x -> execute();
return $x-> fetchALL(PDO::FETCH_ASSOC); //esto retorna el
resultado como un array
}

static public function consultarDatos($PERSONA_ID){

$x = conexion::conectar() -> prepare("SELECT persona_ID,

persona_NOMBRE, persona_DOCUMENTO, persona_EDAD, persona_TELEFONO FROM
personas WHERE persona_ID = :PERSONA_ID");

$x -> bindParam(":PERSONA_ID", $PERSONA_ID, PDO::PARAM_INT);

$x -> execute();
return $x -> fetchAll(PDO::FETCH_ASSOC);

}
static public function ActualizarDatos($datos){
 $X = conexion::conectar() -> prepare("UPDATE personas SET
persona_NOMBRE=:NOMBRE, persona_DOCUMENTO=:DOCUMENTO, persona_EDAD=:EDAD,
persona_TELEFONO=:TELEFONO WHERE persona_ID=:ID");

$X -> bindParam(":NOMBRE", $datos["NOMBRE"], PDO::PARAM_STR);

$X -> bindParam(":DOCUMENTO", $datos["DOCUMENTO"],
PDO::PARAM_STR);
$X -> bindParam(":EDAD", $datos["EDAD"], PDO::PARAM_INT);
$X -> bindParam(":TELEFONO", $datos["TELEFONO"],
PDO::PARAM_STR);
$X -> bindParam(":ID", $datos["ID"], PDO::PARAM_INT);

if($X -> execute()){

return true;
}else{
return false;
}

}
}

?>

En la carpeta “view” tengo un archivo llamado “index.php”

En el archivo “index.php” tengo este código:

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.m
in.js" integrity="sha384-
mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></
script>
<script
src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></
script>
<script
src="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css"></
script>
<script src="assets/js/main.js"></script>
<title>CRUD</title>
</head>

<body class="p-3">
<div class="row">
<div class="col-6 p-3">
<form class="form-control" action="" method="POST"
id="AgregarDatos">
<h3>REGISTRO DE PERSONA</h3>
<div class="row">
<div class="col-6">
<b>NOMBRE:</b>
<input class="form-control" type="text"
name="nombre" id="nombre">
</div>
<div class="col-6">
<b>DOCUMENTO:</b>
<input class="form-control" type="text"
name="documento" id="documento">
</div>
</div>
<br>
<div class="row">
<div class="col-6">
<b>EDAD:</b>
 <input class="form-control" type="text" name="edad"
id="edad">
</div>
<div class="col-6">
<b>TELEFONO:</b>
<input class="form-control" type="text"
name="telefono" id="telefono">
</div>
</div>
<br>
<div class="row">
<div class="col-12 text-center">
<button type="submit" class="btn btn-
primary">GUARDAR</button>
</div>
</div>
</form>
</div>
</div>
<div class="row p-3">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="tablaDatos" class="table" style="width:100%;
font-size:13px;">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">NOMBRE</th>
<th scope="col">DOCUMENTO</th>
<th scope="col">EDAD</th>
<th scope="col">TELEFONO</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

</div>
<!-- Modal -->
 <form id="EditarDatos" action="" method="POST">
<div class="modal fade" id="ModalEditar" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5"
id="exampleModalLabel">EDITAR DATOS</h1>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 mb-2">
<b>NOMBRE:</b>
<input class="form-control" type="text"
name="nombreE" id="nombreE">
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<b>DOCUMENTO:</b>
<input class="form-control" type="text"
name="documentoE" id="documentoE">
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<b>EDAD:</b>
<input class="form-control" type="text"
name="edadE" id="edadE">
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<b>TELEFONO:</b>
<input class="form-control" type="text"
name="telefonoE" id="telefonoE">
</div>
</div>
</div>
<div class="modal-footer">
<input class="form-control" type="hidden"
name="persona_ID" id="persona_ID">
 <button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">CERRAR</button>
<button type="submit" class="btn btn-
primary">ACTUALIZAR</button>
</div>
</div>
</div>
</div>
</form>
</body>

</html>

Y en la carpeta “assets” también tengo tres carpetas llamadas: “css”, “img” y “js”.

En la carpeta “js” tengo un archivo llamado “main.js” y en ese archivo tengo este código:

$(document).ready(function() {

alert("HOLA PIPE");
//Guardar Datos
var contador = 0;
$('#AgregarDatos').submit(function(e) {
e.preventDefault();
NOMBRE = $("#nombre").val();
DOCUMENTO = $("#documento").val();
EDAD = $("#edad").val();
TELEFONO = $("#telefono").val();

if(NOMBRE === "" ||DOCUMENTO === "" || EDAD === "" || TELEFONO ===
"" ){
alert("Faltan datos por llenar");
}else{
$.ajax({
url: "app/controller/controladorPersona.php",
type: "POST",
data: {
opcion:"AgregarDatos", //la opcion identifica la
peticion a realizar
NOMBRE,
DOCUMENTO, //DATOS CAPTURADOS DEL FORMULARIO
EDAD,
TELEFONO,
}
}).done(function(data){
 //validacion de la peticion si se ejecuta o no.
if(data == 1){
alert("DATOS GUARDADOS");
contador = 0;
tablaDatos.ajax.reload(null, true); //esto recarga la
tabla para que aparezcan los cambioa actualizados
$("#AgregarDatos")[0].reset(); //Esto limpia el
contenido del los input del formulario
}else{
alert("Error");
}
});
}
});

//listar Datos
var tablaDatos = $("#tablaDatos").DataTable({retrive: true, paging:
false});
tablaDatos.destroy();//esto limpia la tabla para evitar error;
tablaDatos = $("#tablaDatos").DataTable({
"ajax": {
"url": "app/controller/controladorPersona.php",
"method" : "POST",
"data" : {opcion: "listarDatos"},
"dataSrc": ""
},
"columns": [
{
data: null, render: function(data, type, row){
contador = contador + 1;
return "<b>" + contador + "</b>";
}
},
{"data" : "persona_NOMBRE"},
{"data" : "persona_DOCUMENTO"},
{"data" : "persona_EDAD"},
{"data" : "persona_TELEFONO"},

{
data: null, render: function(data, type, row){
return '<button type="button" class="btn btn-success"
data-id="'+ data.persona_ID + '" id="editarDatos"><i class="bi bi-pencil-
square"></i></button>';
}
 },
{
data: null, render: function(data, type, row){
return '<button type="button" class="btn btn-danger"
data-id="'+ data.persona_ID + '" id="EliminarDatos"><i class="bi bi-
trash"></i></button>';
}
}
]
});

$(document).on("click", "#editarDatos", function (){

$("#ModalEditar").modal("show");
persona_ID = $(this).data("id"); // esto captura el valor de el id
que tiene el boton de editar

$.ajax({
url: "app/controller/controladorPersona.php",
type : "POST",
data : {
opcion: "consultarDatos",
persona_ID
}
}).done(function(data){
datos = JSON.parse(data); //esto combierte el JSON en datos
individuales
$.each(datos, function (i, index){
NOMBRE = datos[i].persona_NOMBRE;
DOCUMENTO = datos[i].persona_DOCUMENTO;
EDAD = datos[i].persona_EDAD;
TELEFONO = datos[i].persona_TELEFONO;
ID = datos[i].persona_ID;
//Ahora asignaremos los datos de JSON a los input del
formulario de editar
$("#nombreE").val(NOMBRE);
$("#documentoE").val(DOCUMENTO);
$("#edadE").val(EDAD);
$("#telefonoE").val(TELEFONO);
$("#persona_ID").val(ID);
})
})
});

$("#EditarDatos").submit(function (e){
e.preventDefault();
 NOMBRE = $("#nombreE").val();
DOCUMENTO = $("#documentoE").val();
EDAD = $("edadE").val();
TELEFONO = $("#telefonoE").val();
ID = $("#persona_ID").val();

if(NOMBRE ==="" || DOCUMENTO === "" || EDAD === "" || TELEFONO ===
""){
alert("Por favor Rellenar todos los campos");
}else{
$.ajax({
url: "app/controller/controladorPersona.php",
type : "POST",
data: {
opcion : "ActualizarDatos",
NOMBRE,
DOCUMENTO,
EDAD,
TELEFONO,
ID
}
}).done(function(data){
if(data == 1){
alert("DATOS ACTUALIZADOS");
contador = 0;
tablaDatos.ajax.reload(null, true);
$("#ModalEditar").modal("hide");
}else{
alert("Error al actulizar los datos :(");
}
})
}
})
});

Cabe recalcar que también tengo una base de datos llamada “crud” y también tiene una tabla
llamada “personas” que tiene 5 campos persona_ID, persona_NOMBRE,
persona_DOCUMENTO, persona_EDAD, persona_TELEFONO.

El problema que tengo es que al momento de realizar una actualización de los datos de una
persona me aparece la alerta alert("DATOS ACTUALIZADOS"); pero no se actualizan
los datos en la base de datos ni en la tabla de datos.