PAGINACION PERSONAS API JSON PHP MYSQL

hacer codigo que cargue tabla persona con nombre y foto guardada en carpeta con html con fetch api json en php y base dato mysql hacer paginacion con siguiente y anterior

Para crear un código que cargue una tabla de personas con nombre y foto guardada en una carpeta utilizando HTML y Fetch API JSON en PHP y una base de datos MySQL y que además tenga paginación con botones de siguiente y anterior, podemos seguir los siguientes pasos:

Crear una base de datos MySQL con una tabla llamada "personas" que tenga los siguientes campos: id (autoincremental), nombre (varchar), foto (varchar) y fecha_creacion (timestamp).

Crear una carpeta llamada "fotos" en la raíz del proyecto donde se guardarán las fotos de las personas.

Crear un archivo HTML que tenga una tabla con tres columnas: "ID", "Nombre" y "Foto". Esta tabla estará vacía al principio y se llenará dinámicamente a través de JavaScript utilizando Fetch API JSON.

Crear un archivo PHP que se encargue de leer los datos de la base de datos y devolverlos en formato JSON cuando se llame mediante Fetch API. Este archivo también se encargará de realizar la paginación. Para ello, recibirá dos parámetros mediante GET: "pagina" y "registros_por_pagina". La variable "pagina" indicará el número de página actual y "registros_por_pagina" el número de registros que se mostrarán en cada página.

En el archivo HTML, crear un script de JavaScript que llame al archivo PHP mediante Fetch API para obtener los datos de la base de datos y llenar la tabla. Este script también se encargará de manejar la paginación y actualizar la tabla cada vez que se cambie de página.

Agregar botones de siguiente y anterior debajo de la tabla para permitir la navegación entre páginas. Estos botones también llamarán al archivo PHP mediante Fetch API para obtener los datos de la siguiente o anterior página y actualizar la tabla.

A continuación se muestra un ejemplo de cómo podría ser el código PHP para leer los datos de la base de datos y realizar la paginación:

php

Copy code

<?php

// Conectar a la base de datos

$conexion = new mysqli("servidor", "usuario", "contraseña", "basedatos");

// Obtener los parámetros de paginación

$pagina = $_GET["pagina"] ?? 1;

$registros_por_pagina = $_GET["registros_por_pagina"] ?? 10;

// Calcular el índice de inicio y fin para los registros de la página actual

$indice_inicio = ($pagina - 1) * $registros_por_pagina;

$indice_fin = $indice_inicio + $registros_por_pagina;

// Consultar los registros de la página actual

$resultado = $conexion->query("SELECT * FROM personas ORDER BY fecha_creacion DESC LIMIT $indice_inicio, $registros_por_pagina");

// Crear un array con los datos de las personas

$personas = [];

while ($fila = $resultado->fetch_assoc()) {

$personas[] = $fila;

}

// Calcular el número total de páginas

$resultado_total = $conexion->query("SELECT COUNT(*) AS total FROM personas");

$numero_total_registros = $resultado_total->fetch_assoc()["total"];

$numero_total_paginas = ceil($numero_total_registros / $registros_por_pagina);

// Devolver los datos en formato JSON

echo json_encode([

"personas" => $personas,

"numero_total_paginas" => $numero_total_paginas,

"pagina_actual" => $pagina,

]);

En el siguiente ejemplo se muestra cómo podría ser el código HTML

jose fernandez

ejemplo se muestra cómo podría ser el código HTML

A continuación se muestra un ejemplo de cómo podría ser el código HTML para la tabla de personas con paginación:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Tabla de personas con paginación</title>

</head>

<body>

<thead>

<tr>

<th>Nombre</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

<button id="boton_anterior">Anterior</button>

<button id="boton_siguiente">Siguiente</button>

</div>

// Configuración de la paginación

var registros_por_pagina = 10;

var pagina_actual = 1;

var numero_total_paginas = 1;

// Función para llenar la tabla con los datos obtenidos del servidor

function llenarTabla(personas) {

var tbody = document.querySelector("#tabla_personas tbody");

tbody.innerHTML = "";

personas.forEach(function(persona) {

var tr = document.createElement("tr");

tr.innerHTML = `

<td>${persona.id}</td>

<td>${persona.nombre}</td>

tbody.appendChild(tr);

});

}

// Función para actualizar la paginación

function actualizarPaginacion() {

var boton_anterior = document.querySelector("#boton_anterior");

var boton_siguiente = document.querySelector("#boton_siguiente");

boton_anterior.disabled = pagina_actual == 1;

boton_siguiente.disabled = pagina_actual == numero_total_paginas;

}

// Función para obtener los datos del servidor y llenar la tabla

function obtenerDatos() {

fetch(`datos.php?pagina=${pagina_actual}&registros_por_pagina=${registros_por_pagina}`)

.then(function(response) {

return response.json();

})

.then(function(data) {

llenarTabla(data.personas);

numero_total_paginas = data.numero_total_paginas;

actualizarPaginacion();

});

}

// Manejadores de eventos para los botones de paginación

document.querySelector("#boton_anterior").addEventListener("click", function() {

if (pagina_actual > 1) {

pagina_actual--;

obtenerDatos();

}

});

document.querySelector("#boton_siguiente").addEventListener("click", function() {

if (pagina_actual < numero_total_paginas) {

pagina_actual++;

obtenerDatos();

}

});

// Obtener los datos del servidor y llenar la tabla al cargar la página

obtenerDatos();

</script>

</body>

</html>

Este código utiliza Fetch API para llamar al archivo PHP y obtener los datos de la base de datos en formato JSON. Luego, utiliza JavaScript para llenar la tabla con los datos obtenidos y actualizar la paginación al cambiar de página. Los botones de siguiente y anterior llaman al servidor para obtener los datos de la siguiente o anterior página y actualizar la tabla.

jose fernandez

hazlo pero con el metodo pdo de php

Aquí está el código PHP para obtener los datos de la base de datos usando PDO en lugar de la extensión mysql:

php

Copy code

<?php

// Conexión a la base de datos

$host = "localhost";

$dbname = "nombre_de_la_base_de_datos";

$username = "nombre_de_usuario";

$password = "contraseña";

$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

// Obtener la página actual y el número de registros por página

$pagina = isset($_GET["pagina"]) ? (int)$_GET["pagina"] : 1;

$registros_por_pagina = isset($_GET["registros_por_pagina"]) ? (int)$_GET["registros_por_pagina"] : 10;

// Calcular el índice del primer registro de la página actual

$indice_primer_registro = ($pagina - 1) * $registros_por_pagina;

// Consultar la base de datos para obtener los registros de la página actual

$stmt = $conn->prepare("SELECT * FROM personas ORDER BY id LIMIT :inicio, :registros_por_pagina");

$stmt->bindParam(":inicio", $indice_primer_registro, PDO::PARAM_INT);

$stmt->bindParam(":registros_por_pagina", $registros_por_pagina, PDO::PARAM_INT);

$stmt->execute();

$personas = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Contar el número total de registros en la base de datos

$stmt = $conn->prepare("SELECT COUNT(*) AS total FROM personas");

$stmt->execute();

$total_registros = $stmt->fetch(PDO::FETCH_ASSOC)["total"];

// Calcular el número total de páginas

$numero_total_paginas = ceil($total_registros / $registros_por_pagina);

// Retornar los datos en formato JSON

echo json_encode(array(

"personas" => $personas,

"numero_total_paginas" => $numero_total_paginas

));

Este código utiliza PDO para conectarse a la base de datos y ejecutar consultas. El código también calcula el número total de registros y el número total de páginas para la paginación. Al final, devuelve los datos en formato JSON para ser procesados por el código JavaScript que se muestra en mi respuesta anterior.

jose fernandez

haz el código HTML pero para pdo

El código HTML no cambia si utilizamos PDO o la extensión mysql para conectarnos a la base de datos. Aquí te muestro el mismo código HTML que proporcioné en mi respuesta anterior:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Paginación con PHP, MySQL y Fetch API</title>

<style>

#personas {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin: 0 auto;

max-width: 800px;

}

.persona {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

max-width: 200px;

}

.persona img {

width: 100%;

max-width: 200px;

height: auto;

}

.pagination {

display: flex;

justify-content: center;

margin-top: 20px;

}

.pagination button {

background-color: #4CAF50;

border: none;

color: white;

cursor: pointer;

margin: 0 10px;

padding: 10px;

text-align: center;

text-decoration: none;

font-size: 16px;

}

.pagination button:hover {

background-color: #3e8e41;

}

.pagination button:disabled {

background-color: #aaaaaa;

cursor: default;

}

</style>

</head>

<body>

<h1>Paginación con PHP, MySQL y Fetch API</h1>

<button id="anterior" disabled>Anterior</button>

<button id="siguiente">Siguiente</button>

</div>

// Definir variables globales

var pagina_actual = 1;

var numero_total_paginas = 1;

var registros_por_pagina = 10;

// Obtener la lista de personas de la página actual

function obtenerPersonas() {

fetch(`obtener_personas.php?pagina=${pagina_actual}&registros_por_pagina=${registros_por_pagina}`)

.then(response => response.json())

.then(data => {

// Actualizar la variable global con el número total de páginas

numero_total_paginas = data.numero_total_paginas;

// Crear el HTML para mostrar la lista de personas

var html = "";

data.personas.forEach(persona => {

html += `

<p>${persona.nombre}</p>

</div>

});

// Insertar el HTML en la página

document.getElementById("personas").innerHTML = html;

// Habilitar o deshabilitar los botones de paginación según corresponda

if (pagina_actual == 1) {

document.getElementById("anterior").disabled = true;

} else {

document.getElementById("anterior").disabled = false;

}

if (pagina_actual == numero_total_paginas) {

document.getElementById("siguiente").disabled = true;

} else {

document.getElementById("siguiente").disabled = false;

}

});

}

// Manejar el clic en el botón "Siguiente"

document.getElementById("siguiente").addEventListener("click", function() {

if (pagina_actual < numero_total_paginas) {

pagina

jose fernandez

hazme de nuevo el código HTML pero para pdo

De acuerdo, aquí te muestro el código HTML para la paginación con PDO:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Paginación con PHP, MySQL y Fetch API</title>

<style>

#personas {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin: 0 auto;

max-width: 800px;

}

.persona {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

max-width: 200px;

}

.persona img {

width: 100%;

max-width: 200px;

height: auto;

}

.pagination {

display: flex;

justify-content: center;

margin-top: 20px;

}

.pagination button {

background-color: #4CAF50;

border: none;

color: white;

cursor: pointer;

margin: 0 10px;

padding: 10px;

text-align: center;

text-decoration: none;

font-size: 16px;

}

.pagination button:hover {

background-color: #3e8e41;

}

.pagination button:disabled {

background-color: #aaaaaa;

cursor: default;

}

</style>

</head>

<body>

<h1>Paginación con PHP, MySQL y Fetch API</h1>

<button id="anterior" disabled>Anterior</button>

<button id="siguiente">Siguiente</button>

</div>

// Definir variables globales

var pagina_actual = 1;

var numero_total_paginas = 1;

var registros_por_pagina = 10;

// Obtener la lista de personas de la página actual

function obtenerPersonas() {

fetch(`obtener_personas.php?pagina=${pagina_actual}&registros_por_pagina=${registros_por_pagina}`)

.then(response => response.json())

.then(data => {

// Actualizar la variable global con el número total de páginas

numero_total_paginas = data.numero_total_paginas;

// Crear el HTML para mostrar la lista de personas

var html = "";

data.personas.forEach(persona => {

html += `

<p>${persona.nombre}</p>

</div>

});

// Insertar el HTML en la página

document.getElementById("personas").innerHTML = html;

// Habilitar o deshabilitar los botones de paginación según corresponda

if (pagina_actual == 1) {

document.getElementById("anterior").disabled = true;

} else {

document.getElementById("anterior").disabled = false;

}

if (pagina_actual == numero_total_paginas) {

document.getElementById("siguiente").disabled = true;

} else {

document.getElementById("siguiente").disabled = false;

}

});

}

// Manejar el clic en el botón "Siguiente"

document.getElementById("siguiente").addEventListener("click", function() {

if (pagina_actual < numero_total_paginas) {

pagina_actual++;

obtenerPersonas();

}

});

// Manejar el clic en el botón "Anterior"

jose fernandez

hazme de nuevo el código HTML pero para pdo sin style css

De acuerdo, aquí te muestro el código HTML para la paginación con PDO sin estilos CSS:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Paginación con PHP, MySQL y Fetch API</title>

</head>

<body>

<h1>Paginación con PHP, MySQL y Fetch API</h1>

<button id="anterior" disabled>Anterior</button>

<button id="siguiente">Siguiente</button>

</div>

// Definir variables globales

var pagina_actual = 1;

var numero_total_paginas = 1;

var registros_por_pagina = 10;

// Obtener la lista de personas de la página actual

function obtenerPersonas() {

fetch(`obtener_personas.php?pagina=${pagina_actual}&registros_por_pagina=${registros_por_pagina}`)

.then(response => response.json())

.then(data => {

// Actualizar la variable global con el número total de páginas

numero_total_paginas = data.numero_total_paginas;

// Crear el HTML para mostrar la lista de personas

var html = "";

data.personas.forEach(persona => {

html += `

<p>${persona.nombre}</p>

</div>

});

// Insertar el HTML en la página

document.getElementById("personas").innerHTML = html;

// Habilitar o deshabilitar los botones de paginación según corresponda

if (pagina_actual == 1) {

document.getElementById("anterior").disabled = true;

} else {

document.getElementById("anterior").disabled = false;

}

if (pagina_actual == numero_total_paginas) {

document.getElementById("siguiente").disabled = true;

} else {

document.getElementById("siguiente").disabled = false;

}

});

}

// Manejar el clic en el botón "Siguiente"

document.getElementById("siguiente").addEventListener("click", function() {

if (pagina_actual < numero_total_paginas) {

pagina_actual++;

obtenerPersonas();

}

});

// Manejar el clic en el botón "Anterior"

document.getElementById("anterior").addEventListener("click", function() {

if (pagina_actual > 1) {

pagina_actual--;

obtenerPersonas();

}

});

// Obtener la lista de personas de la página actual al cargar la página

obtenerPersonas();

</script>

</body>

</html>

Ten en cuenta que este código solo muestra la estructura básica de la página, sin incluir estilos CSS. Si deseas agregar estilos a tu página, deberás escribir las reglas CSS correspondientes en una sección <style> dentro del <head> de tu documento HTML o en un archivo externo de CSS.

///////////

HAZLO CON FETCH PERO METODO POST Y PDO

De acuerdo, aquí te muestro cómo sería el código HTML y JavaScript para la paginación con Fetch API, usando el método POST y PDO en el lado del servidor:

HTML:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Paginación con PHP, MySQL y Fetch API</title>

</head>

<body>

<h1>Paginación con PHP, MySQL y Fetch API</h1>

<button id="anterior" disabled>Anterior</button>

<button id="siguiente">Siguiente</button>

</div>

</body>

</html>

JavaScript (paginacion.js):

javascript

Copy code

// Definir variables globales

var pagina_actual = 1;

var numero_total_paginas = 1;

var registros_por_pagina = 10;

// Obtener la lista de personas de la página actual

function obtenerPersonas() {

fetch('obtener_personas.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify({

pagina: pagina_actual,

registros_por_pagina: registros_por_pagina

})

.then(response => response.json())

.then(data => {

// Actualizar la variable global con el número total de páginas

numero_total_paginas = data.numero_total_paginas;

// Crear el HTML para mostrar la lista de personas

var html = "";

data.personas.forEach(persona => {

html += `

<p>${persona.nombre}</p>

</div>

});

// Insertar el HTML en la página

document.getElementById("personas").innerHTML = html;

// Habilitar o deshabilitar los botones de paginación según corresponda

if (pagina_actual == 1) {

document.getElementById("anterior").disabled = true;

} else {

document.getElementById("anterior").disabled = false;

}

if (pagina_actual == numero_total_paginas) {

document.getElementById("siguiente").disabled = true;

} else {

document.getElementById("siguiente").disabled = false;

}

});

}

// Manejar el clic en el botón "Siguiente"

document.getElementById("siguiente").addEventListener("click", function() {

if (pagina_actual < numero_total_paginas) {

pagina_actual++;

obtenerPersonas();

}

});

// Manejar el clic en el botón "Anterior"

document.getElementById("anterior").addEventListener("click", function() {

if (pagina_actual > 1) {

pagina_actual--;

obtenerPersonas();

}

});

// Obtener la lista de personas de la página actual al cargar la página

obtenerPersonas();

PHP (obtener_personas.php):

php

Copy code

<?php

// Conectarse a la base de datos con PDO

$dsn = "mysql:host=localhost;dbname=nombre_de_la_base_de_datos;charset=utf8mb4";

$usuario = "nombre_de_usuario";

$contrasena = "contraseña_de_usuario";

try {

$conexion = new PDO($dsn, $usuario, $contrasena);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Error al conectar con

jose fernandez

HAZME SOLO EL obtener_personas.php

Claro, aquí te muestro cómo sería el código PHP para obtener la lista de personas usando el método POST y PDO:

php

Copy code

<?php

// Conectarse a la base de datos con PDO

$dsn = "mysql:host=localhost;dbname=nombre_de_la_base_de_datos;charset=utf8mb4";

$usuario = "nombre_de_usuario";

$contrasena = "contraseña_de_usuario";

try {

$conexion = new PDO($dsn, $usuario, $contrasena);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Error al conectar con la base de datos: " . $e->getMessage());

}

// Obtener el número de página y el número de registros por página enviados por POST

$pagina = $_POST["pagina"] ?? 1;

$registros_por_pagina = $_POST["registros_por_pagina"] ?? 10;

// Calcular el número de registros que se deben saltar para obtener los registros de la página actual

$registros_a_saltar = ($pagina - 1) * $registros_por_pagina;

// Obtener el número total de registros en la tabla "personas"

$stmt = $conexion->prepare("SELECT COUNT(*) FROM personas");

$stmt->execute();

$numero_total_registros = $stmt->fetchColumn();

// Calcular el número total de páginas

$numero_total_paginas = ceil($numero_total_registros / $registros_por_pagina);

// Obtener la lista de personas de la página actual

$stmt = $conexion->prepare("SELECT nombre, foto FROM personas LIMIT :registros_por_pagina OFFSET :registros_a_saltar");

$stmt->bindValue(":registros_por_pagina", (int)$registros_por_pagina, PDO::PARAM_INT);

$stmt->bindValue(":registros_a_saltar", (int)$registros_a_saltar, PDO::PARAM_INT);

$stmt->execute();

$personas = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Crear un arreglo con los datos de respuesta

$respuesta = array(

"personas" => $personas,

"numero_total_paginas" => $numero_total_paginas

);

// Devolver los datos como JSON

header("Content-Type: application/json");

echo json_encode($respuesta);

jose fernandez

EN obtener_personas.php FALTA EL DECODE JSON PARA $_POST["pagina"] Y $_POST["registros_por_pagina"]

Tienes razón, me disculpo por mi error. Antes de utilizar los valores de $_POST["pagina"] y $_POST["registros_por_pagina"], es necesario decodificar el JSON que se envió en la petición.

Aquí te muestro cómo se vería el código corregido:

php

Copy code

<?php

// Conectarse a la base de datos con PDO

$dsn = "mysql:host=localhost;dbname=nombre_de_la_base_de_datos;charset=utf8mb4";

$usuario = "nombre_de_usuario";

$contrasena = "contraseña_de_usuario";

try {

$conexion = new PDO($dsn, $usuario, $contrasena);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Error al conectar con la base de datos: " . $e->getMessage());

}

// Decodificar el JSON de la petición para obtener el número de página y el número de registros por página

$json = file_get_contents('php://input');

$data = json_decode($json, true);

$pagina = $data["pagina"] ?? 1;

$registros_por_pagina = $data["registros_por_pagina"] ?? 10;

// Calcular el número de registros que se deben saltar para obtener los registros de la página actual

$registros_a_saltar = ($pagina - 1) * $registros_por_pagina;

// Obtener el número total de registros en la tabla "personas"

$stmt = $conexion->prepare("SELECT COUNT(*) FROM personas");

$stmt->execute();

$numero_total_registros = $stmt->fetchColumn();

// Calcular el número total de páginas

$numero_total_paginas = ceil($numero_total_registros / $registros_por_pagina);

// Obtener la lista de personas de la página actual

$stmt = $conexion->prepare("SELECT nombre, foto FROM personas LIMIT :registros_por_pagina OFFSET :registros_a_saltar");

$stmt->bindValue(":registros_por_pagina", (int)$registros_por_pagina, PDO::PARAM_INT);

$stmt->bindValue(":registros_a_saltar", (int)$registros_a_saltar, PDO::PARAM_INT);

$stmt->execute();

$personas = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Crear un arreglo con los datos de respuesta

$respuesta = array(

"personas" => $personas,

"numero_total_paginas" => $numero_total_paginas

);

// Devolver los datos como JSON

header("Content-Type: application/json");

echo json_encode($respuesta);

//////////////////////

HAZ EL FETCH POST PERO METODO JSON.PARSE Y CON PDO Y JUNTO AL obtener_personas.php

Por supuesto, aquí te muestro cómo sería el código del archivo HTML utilizando fetch() con el método POST, el objeto FormData() y JSON.parse(). Además, el archivo obtener_personas.php se encuentra integrado en el mismo archivo:

html

Copy code

<!DOCTYPE html>

<head>

<title>Lista de Personas</title>

</head>

<body>

// Función para crear y mostrar la lista de personas

function mostrarPersonas(pagina = 1, registrosPorPagina = 10) {

// Crear el objeto FormData() para enviar los datos de la petición POST

const formData = new FormData();

formData.append('pagina', pagina);

formData.append('registros_por_pagina', registrosPorPagina);

// Crear la petición POST con fetch()

fetch('obtener_personas.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

// Crear la lista de personas en el HTML

let listaPersonas = '';

data.personas.forEach(persona => {

listaPersonas += `<div>

<p>${persona.nombre}</p>

</div>`;

});

document.getElementById('lista-personas').innerHTML = listaPersonas;

// Crear la paginación en el HTML

let paginacion = '';

for (let i = 1; i <= data.numero_total_paginas; i++) {

paginacion += `<button onclick="mostrarPersonas(${i}, ${registrosPorPagina})">${i}</button>`;

}

document.getElementById('paginacion').innerHTML = paginacion;

})

.catch(error => {

console.error('Error al obtener la lista de personas:', error);

});

}

// Mostrar la lista de personas al cargar la página

mostrarPersonas();

</script>

</body>

</html>

Y aquí te muestro cómo sería el código del archivo obtener_personas.php utilizando PDO y recibiendo los datos en formato JSON:

php

Copy code

<?php

// Conectarse a la base de datos con PDO

$dsn = "mysql:host=localhost;dbname=nombre_de_la_base_de_datos;charset=utf8mb4";

$usuario = "nombre_de_usuario";

$contrasena = "contraseña_de_usuario";

try {

$conexion = new PDO($dsn, $usuario, $contrasena);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Error al conectar con la base de datos: " . $e->getMessage());

}

// Decodificar el JSON de la petición para obtener el número de página y el número de registros por página

$json = file_get_contents('php://input');

$data = json_decode($json, true);

$pagina = $data["pagina"] ?? 1;

$registros_por_pagina = $data["registros_por_pagina"] ?? 10;

// Calcular el número de registros que se deben saltar para obtener los registros de la página actual

$registros_a_saltar = ($pagina - 1) * $registros_por_pagina;

// Obtener el número total de registros en la tabla "personas"

$stmt = $conexion->prepare("SELECT COUNT

jose fernandez

haz json parse en el body de fetch

Claro, aquí te muestro cómo sería el código en el archivo HTML utilizando fetch() con el método POST, el objeto FormData() y JSON.parse() en el body:

html

Copy code

<!DOCTYPE html>

<head>

<title>Lista de Personas</title>

</head>

<body>

// Función para crear y mostrar la lista de personas

function mostrarPersonas(pagina = 1, registrosPorPagina = 10) {

// Crear el objeto FormData() para enviar los datos de la petición POST

const formData = new FormData();

formData.append('pagina', pagina);

formData.append('registros_por_pagina', registrosPorPagina);

// Crear la petición POST con fetch()

fetch('obtener_personas.php', {

method: 'POST',

body: JSON.stringify(Object.fromEntries(formData)),

headers: {

'Content-Type': 'application/json'

}

})

.then(response => response.json())

.then(data => {

// Crear la lista de personas en el HTML

let listaPersonas = '';

data.personas.forEach(persona => {

listaPersonas += `<div>

<p>${persona.nombre}</p>

</div>`;

});

document.getElementById('lista-personas').innerHTML = listaPersonas;

// Crear la paginación en el HTML

let paginacion = '';

for (let i = 1; i <= data.numero_total_paginas; i++) {

paginacion += `<button onclick="mostrarPersonas(${i}, ${registrosPorPagina})">${i}</button>`;

}

document.getElementById('paginacion').innerHTML = paginacion;

})

.catch(error => {

console.error('Error al obtener la lista de personas:', error);

});

}

// Mostrar la lista de personas al cargar la página

mostrarPersonas();

</script>

</body>

</html>

En el archivo PHP no hay cambios respecto al código que proporcioné en la última respuesta, ya que en el archivo PHP no es necesario hacer ningún cambio para recibir los datos en formato JSON.

jose fernandez

body: JSON.parse(), hazlo con ese

Lo siento, cometí un error en mi respuesta anterior. La función JSON.parse() debe ser utilizada en el lado del servidor para interpretar los datos recibidos en formato JSON, pero en el lado del cliente (en el archivo HTML) debemos enviar los datos en formato JSON utilizando el método JSON.stringify() en el objeto FormData().

Entonces, para utilizar fetch() con el método POST y enviar los datos en formato JSON utilizando JSON.stringify() en el objeto FormData(), el código en el archivo HTML sería el siguiente:

html

Copy code

<!DOCTYPE html>

<head>

<title>Lista de Personas</title>

</head>

<body>

// Función para crear y mostrar la lista de personas

function mostrarPersonas(pagina = 1, registrosPorPagina = 10) {

// Crear el objeto FormData() para enviar los datos de la petición POST

const formData = new FormData();

formData.append('pagina', pagina);

formData.append('registros_por_pagina', registrosPorPagina);

// Crear la petición POST con fetch()

fetch('obtener_personas.php', {

method: 'POST',

body: JSON.stringify(Object.fromEntries(formData)),

headers: {

'Content-Type': 'application/json'

}

})

.then(response => response.json())

.then(data => {

// Crear la lista de personas en el HTML

let listaPersonas = '';

data.personas.forEach(persona => {

listaPersonas += `<div>

<p>${persona.nombre}</p>

</div>`;

});

document.getElementById('lista-personas').innerHTML = listaPersonas;

// Crear la paginación en el HTML

let paginacion = '';

for (let i = 1; i <= data.numero_total_paginas; i++) {

paginacion += `<button onclick="mostrarPersonas(${i}, ${registrosPorPagina})">${i}</button>`;

}

document.getElementById('paginacion').innerHTML = paginacion;

})

.catch(error => {

console.error('Error al obtener la lista de personas:', error);

});

}

// Mostrar la lista de personas al cargar la página

mostrarPersonas();

</script>

</body>

</html>

Y el archivo PHP sería el mismo que proporcioné en la respuesta anterior, sin la necesidad de utilizar JSON.parse():

php

Copy code

<?php

// Conectar a la base de datos con PDO

$dsn = 'mysql:host=localhost;dbname=nombre_de_la_base_de_datos;charset=utf8mb4';

$usuario = 'nombre_de_usuario';

$contrasena = 'contraseña';

$pdo = new PDO($dsn, $usuario, $contrasena);

// Obtener los datos de la petición POST en formato JSON

$postdata = file_get_contents("php://input");

$request = json_decode($postdata);

// Obtener el número de página y registros por página

$pagina = isset($request->pagina) ? intval($request->pagina) : 1;

$registrosPorPagina = isset($request->registros_por_pagina) ? intval($request->registros_por_pagina) : 10;

// Calcular el índice del primer registro de la página actual

$indicePrimerRegistro

jose fernandez

entonces cuando uso el json parse ?

El uso de JSON.parse() en el lado del servidor (en el archivo PHP) es para interpretar los datos enviados desde el cliente en formato JSON.

En la implementación que te mostré anteriormente, no es necesario utilizar JSON.parse() en el lado del cliente (en el archivo HTML) porque estamos enviando los datos en formato JSON utilizando JSON.stringify() en el objeto FormData() que se envía en el cuerpo de la petición.

Entonces, en resumen, se utiliza JSON.parse() en el lado del servidor para interpretar los datos enviados desde el cliente en formato JSON, y JSON.stringify() en el lado del cliente para enviar los datos en formato JSON en la petición.

jose fernandez

dame 1 ejemplo

Claro, aquí te muestro un ejemplo sencillo:

Supongamos que tenemos un objeto JavaScript llamado datos que contiene algunos valores:

arduino

Copy code

const datos = {

nombre: "Juan",

edad: 25,

correo: "juan@example.com"

};

Para enviar este objeto en una petición POST utilizando fetch() y el formato JSON, podemos hacer lo siguiente:

javascript

Copy code

fetch("mi_servidor.php", {

method: "POST",

headers: {

"Content-Type": "application/json"

body: JSON.stringify(datos)

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

En este ejemplo, utilizamos JSON.stringify(datos) para convertir el objeto datos en una cadena JSON que puede ser enviada en el cuerpo de la petición.

En el lado del servidor (en el archivo PHP), podemos utilizar json_decode() para interpretar los datos recibidos en formato JSON:

php

Copy code

$datos = json_decode(file_get_contents('php://input'), true);

// Acceder a los valores recibidos

$nombre = $datos['nombre'];

$edad = $datos['edad'];

$correo = $datos['correo'];

En este ejemplo, utilizamos json_decode(file_get_contents('php://input'), true) para obtener los datos recibidos en el cuerpo de la petición y convertirlos en un array asociativo de PHP. Luego, podemos acceder a los valores recibidos utilizando las claves del array.

jose fernandez

ejemplo con json parse

Claro, aquí te muestro un ejemplo con JSON.parse() en el lado del servidor:

Supongamos que tenemos un objeto JavaScript llamado datos que contiene algunos valores:

arduino

Copy code

const datos = {

nombre: "Juan",

edad: 25,

correo: "juan@example.com"

};

Para enviar este objeto en una petición POST utilizando fetch() y el formato JSON, podemos hacer lo siguiente:

javascript

Copy code

fetch("mi_servidor.php", {

method: "POST",

headers: {

"Content-Type": "application/json"

body: JSON.stringify(datos)

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

En este ejemplo, utilizamos JSON.stringify(datos) para convertir el objeto datos en una cadena JSON que puede ser enviada en el cuerpo de la petición.

En el lado del servidor (en el archivo PHP), podemos utilizar json_decode() para interpretar los datos recibidos en formato JSON:

php

Copy code

$data = json_decode($_POST['data'], true);

// Acceder a los valores recibidos

$nombre = $data['nombre'];

$edad = $data['edad'];

$correo = $data['correo'];

En este ejemplo, utilizamos json_decode($_POST['data'], true) para obtener los datos recibidos en el cuerpo de la petición en formato JSON y convertirlos en un array asociativo de PHP. Luego, podemos acceder a los valores recibidos utilizando las claves del array.

Para enviar los datos utilizando JSON.parse() en el lado del servidor, debemos incluir el objeto JSON en el cuerpo de la petición y especificar el tipo de contenido como application/json. En el ejemplo anterior, podemos modificar el cuerpo de la petición de la siguiente manera:

css

Copy code

body: JSON.stringify({

data: JSON.stringify(datos)

})

En este caso, estamos enviando un objeto JSON con una propiedad llamada data que contiene los datos convertidos en una cadena JSON utilizando JSON.stringify(). En el lado del servidor, podemos obtener los datos y convertirlos de nuevo a un objeto JavaScript utilizando JSON.parse() de la siguiente manera:

php

Copy code

$data = json_decode($_POST['data'], true);

$datos = json_decode($data, true);

// Acceder a los valores recibidos

$nombre = $datos['nombre'];

$edad = $datos['edad'];

$correo = $datos['correo'];

En este ejemplo, primero utilizamos json_decode($_POST['data'], true) para obtener la cadena JSON que se envió en la propiedad data y convertirla en un array asociativo de PHP. Luego, utilizamos json_decode($data, true) para convertir la cadena JSON en un objeto JavaScript, y finalmente podemos acceder a los valores recibidos utilizando las claves del objeto.

miscodesdelchatgpt.blogspot.com

PAGINACION PERSONAS API JSON PHP MYSQL

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

DETECTAR DIRECCION IP CON PHP Y JS