Creaci\u00f3n de una consulta y una alta con PHP y con cliente JS<\/p>\n\n\n\n
consulta.php<\/p>\n\n\n\n
<?php\nheader('Content-Type: application\/json; charset=utf-8');\n\n$conn = new mysqli('localhost', 'root', '', 'test');\n\nif ($conn->connect_error) {\n\techo \"Fall\u00f3 la conexi\u00f3n: \".$conn->connect_error;\t\n}\n\n$conn->set_charset('utf8mb4');\n\n$sql = 'SELECT * FROM usuarios';\n$result = $conn->query($sql);\n\n$data=array();\nwhile($row=$result->fetch_assoc()){\n $data[]=$row;\n}\nheader('Content-Type: application\/json');\necho json_encode($data);\n$conn->close();\n?><\/code><\/pre>\n\n\n\nconsulta.html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n\n<body>\n <table>\n <thead>\n <tr>\n <th>id<\/th>\n <th>nombre<\/th>\n <th>edad<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"usuarios-body\"><\/tbody>\n <\/table>\n\n <script>\n function cargarUsuarios() {\n fetch('.\/consulta.php')\n .then(respuesta => respuesta.json())\n .then(usuarios => mostrarUsuarios(usuarios))\n .catch(error => console.error(error));\n }\n function mostrarUsuarios(usuarios) {\n\n const tbody = document.getElementById('usuarios-body');\n tbody.innerHTML = '';\n \n usuarios.forEach((usuario) => {\n const fila = document.createElement('tr');\n\n const celdaId = document.createElement('td');\n celdaId.textContent = usuario.id;\n\n const celdaNombre = document.createElement('td');\n celdaNombre.textContent = usuario.nombre;\n\n const celdaEdad = document.createElement('td');\n celdaEdad.textContent = usuario.edad;\n\n fila.appendChild(celdaId);\n fila.appendChild(celdaNombre);\n fila.appendChild(celdaEdad);\n tbody.appendChild(fila);\n });\n }\n cargarUsuarios();\n <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\nalta.php<\/p>\n\n\n\n
<?php\nheader('Content-Type: application\/json; charset=utf-8');\n\n$conn = new mysqli('localhost', 'root', '', 'test');\n\nif ($conn->connect_error) {\n\techo \"Fall\u00f3 la conexi\u00f3n\";\n\texit;\n}\n\n$conn->set_charset('utf8mb4');\n\n$nombre = $_POST['nombre'];\n$edad = $_POST['edad'];\n\n$edad = (int) $edad;\n\n$stmt = $conn->prepare('INSERT INTO usuarios (nombre, edad) VALUES (?, ?)');\n\n$stmt->bind_param('si', $nombre, $edad);\n\nif (!$stmt->execute()) {\n\techo \"Error al insertar\";\n}else {\n echo \"Registro insertado\";\n}\n\n$stmt->close();\n$conn->close();\n?>\n<\/code><\/pre>\n\n\n\nalta.html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Alta<\/title>\n<\/head>\n\n<body>\n <label>nombre\n <input type=\"text\" id=\"nombre\">\n <\/label>\n <label>edad\n <input type=\"text\" id=\"edad\">\n <\/label>\n <button onclick=\"alta()\">Alta<\/button>\n\n <script>\n function alta() {\n const nombre = document.getElementById(\"nombre\").value;\n const edad = document.getElementById(\"edad\").value;\n\n fetch('.\/alta.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded; charset=UTF-8'\n },\n body: `nombre=${encodeURIComponent(nombre)}&edad=${encodeURIComponent(edad)}`\n })\n .then(respuesta => respuesta.text())\n .then(mensaje => console.log(mensaje))\n .catch(error => console.error(error));\n }\n <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Creaci\u00f3n de una consulta y una alta con PHP y con cliente JS consulta.php consulta.html alta.php alta.html<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[204,369],"class_list":["post-1117","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-php"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":1118,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1117\/revisions\/1118"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}