En este capítulo lo que vamos a hacer son las 4 operaciones básicas que se le puede hacer a un modelo de datos, es decir, el CRUD, y lo haremos con las 3 técnicas de Ajax que vimos en anteriores capítulos, el objeto XMLHttpRequest, el API Fetch, y la librería Axios.
En el capítulo de hoy vamos a construir la parte front que necesitaríamos para poder generar esa información, y va a tener la siguiente sintaxis:
Sintaxis del archivo crud_ajas.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRUD API REST Ajax</title>
</head>
<body>
<h1>CRUD API REST Ajax</h1>
<section id="crud">
<article>
<h2 class="crud-title">Agregar nombre</h2>
<form class="crud-form">
<input type="hidden" name="action" />
<input type="text" name="nombre" placeholder="Nombre" required />
<br />
<input type="email" name="email" placeholder="Email" required />
<br />
<input type="submit" value="Enviar" />
</form>
</article>
<article>
<h2>Ver nombres</h2>
<table class="crud-table">
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
</article>
</section>
<template id="crud-template">
<tr>
<td class="name"></td>
<td class="email"></td>
<td>
<button class="edit">Editar</button>
<button class="delete">Eliminar</button>
</td>
</tr>
</template>
<script>
const d = document,
$table = d.querySelector(".crud-table"),
$form = d.querySelector(".crud-form"),
$title = d.querySelector(".crud-title"),
$template = d.getElementById("crud-template").content,
$fragment = d.createDocumentFragment();
</script>
</body>
</html>