Respuesta JSON de AJAX usando jQuery y PHP

Respuesta JSON de AJAX. JSON por sus siglas (siglas JavaScript Object) en español significa notación de objetos JavaScript, es un formato de intercambio de datos que también se utiliza para pasar datos desde el servidor.

Principalmente es la mejor y efectiva manera cuando necesita devolver múltiples valores como respuesta del script del lenguaje PHP al jQuery.

No se pudo devolver directamente una matriz de AJAX, debe haber convertido en el formato válido.

¿Cómo funciona el script Respuesta JSON de AJAX?

• El script puede utilizar formato XML o JSON.
• Dentro de la ejecución del Ajax varia una declaración que mostrare a continuación.

dataType: 'JSON',

El resultado devolverá una matriz de usuarios de AJAX, mientras que return convierte la matriz en formato JSON usando la función json_encode() en PHP. Sin embargo, esto se verá reflejado en el archivo final como una tabla de registros extraídos de una base de datos.

Respuesta JSON de AJAX: Estructura

A continuación, detallaremos varios pasos para completar el ejemplo.

A) Base de datos

Usaremos una base de datos llamado «db_personal» y una tabla de nombre «usuarios«. Sin embargo, recuerden que pueden personalizarlo a su criterio.

Consulta SQL que pueden ejecutar en phpMyAdmin u otro gestor de base de datos MySQL.

CREATE TABLE `usuarios` (
`id` int(11) NOT NULL,
`usuario` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
`nombres` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
`fecha` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `usuarios` (`id`, `usuario`, `nombres`, `email`, `fecha`) VALUES
(1, 'jiten', 'Jiten singh ', 'jiten93@gmail.com', '2021-01-23 02:15:01'),
(2, 'kuldeep', 'Kuldeep', 'kuldeep@gmail.com', '2021-01-23 02:15:01'),
(3, 'mayank', 'Mayank', 'mayank@yahoo.com', '2021-01-23 02:15:01'),
(4, 'dcarpio', 'Daniel carpio', 'ysdeerh@gmail.com', '2021-01-23 02:15:01'),
(5, 'vijay', 'Vijay', 'vijayec@gmai.com', '2021-01-23 02:15:01'),
(6, 'nitin', 'Nitin', 'nitin@gmail.com', '2021-01-23 02:15:01'),
(7, 'rahul', 'Rahul singh', 'rahul@gmail.com', '2021-01-23 02:15:01'),
(8, 'shreya', 'Shreya', 'shreya@yahoo.com', '2021-01-23 02:15:01'),
(9, 'mohit', 'Mohit', 'mohit@gmail.com', '2021-01-23 02:15:01'),
(10, 'rohit', 'Rohit singh', 'rohit@gmail.com', '2021-01-23 02:15:01');

ALTER TABLE `usuarios`
ADD PRIMARY KEY (`id`);

ALTER TABLE `usuarios`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;

B) Configuración Base de datos

Vamos a crear un fichero con nombre config.php para la configuración de la base de datos. Aquí, realizaremos la conexión con MySQL y usaremos la extensión PDO del PHP para darle más seguridad al script.

Código completo

<?php
$host = "localhost";
$dbname = "db_personal";
$username = "root";
$password = "";

try {
$db = new PDO("mysql:host={$host};dbname={$dbname}", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $exception){
die("Connection error: " . $exception->getMessage());
}
?>

C) Maquetado HTML

Con referente al resultado vamos a crear una tabla <table id='userTable'> que mostrara un lista de usuarios para mostrar mediante la respuesta AJAX JSON. Por lo tanto, los registros serán extraídos de MySQL.

Código completo

<div class="col-md-10">
<table id="userTable" class="table table-sm table-striped">
<thead>
<tr>
<th width="5%">Nro</th>
<th width="20%">Usuario</th>
<th width="20%">Nombres</th>
<th width="30%">Email</th>
<th width="30%">Fecha</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

D) Estructura PHP

Se necesitara el archivo ajaxfile.php para controlar la solicitud AJAX.

Las consultas SQL estarán en este archivo y la matriz de codificación en formato JSON para ser mostrado en el archivo HTML

Inicializar la matriz con los detalles del usuario (id, usuario, nombre, correo electrónico y fecha) y antes de devolverla convirtiéndola al formato JSON mediante la función json_encode() del PHP.

Código completo

<?php

include "config.php";

$return_arr = array();

$query = $db->prepare("SELECT * FROM usuarios ORDER BY nombres");
$query->execute();
$data = $query->fetchAll();

foreach ($data as $row): 
$id = $row['id'];
$usuario = $row['usuario'];
$nombres = $row['nombres'];
$email = $row['email'];
$fecha = $row['fecha'];

$return_arr[] = array("id" => $id,
"usuario" => $usuario,
"nombres" => $nombres,
"email" => $email,
"fecha" => $fecha);
endforeach;

// Encoding array in JSON format
echo json_encode($return_arr);
?>

E) Código jQuery

La ejecución Ajax puede realizarse al cargar el documento o presionando un botón para que se ejecute. Sin embargo, en este ejemplo se ejecutará al cargar el documento.

Al cargar el documento, se enviará una solicitud GET de AJAX.

Recorra todos los valores de respuesta y añada una nueva fila a <table id='userTable'> en AJAX correctamente devolución de llamada.

Código completo

$(document).ready(function(){
$.ajax({
url: 'inc/ajaxfile.php',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var usuario = response[i].usuario;
var nombres = response[i].nombres;
var email = response[i].email;
var fecha = response[i].fecha;

var tr_str = "<tr>" +
"<td align='left'>" + (i+1) + "</td>" +
"<td align='left'>" + usuario + "</td>" +
"<td align='left'>" + nombres + "</td>" +
"<td align='left'>" + email + "</td>" +
"<td align='left'>" + fecha + "</td>" +
"</tr>";

$("#userTable tbody").append(tr_str);
}

}
});
});

Conclusión

• En este tutorial, devolveremos una matriz de usuarios a través de AJAX, mientras que return convierte la matriz en formato JSON usando la función json_encode() en PHP.
• Hemos aprendido a mostrar la respuesta JSON y controlarla en jQuery AJAX usando PHP
• Puede convertir la matriz PHP en formato JSON con la función json_encode() y volver como respuesta. Sin embargo, no olvidar que debemos de establecer dataType: ‘JSON’ al enviar solicitud AJAX.

Espero que esta breve explicación les ayude a comprender el método JSON y no se olvide de compartir.

Descargar respuesta JSON de AJAX con PHP

1 archivo(s) 33.84 KB

Descargar