Cómo devolver datos en formato JSON desde un script PHP utilizando jQuery Ajax

jQuery ajax es muy útil cuando quieres enviar u obtener datos de un script PHP sin tener que refrescar la página. Generalmente, se suele devolver un string a la llamada de Ajax para actualizar una parte de la página web. Pero hay veces que se necesita un objeto o un array para mostrar valores en distintas áreas. Mediante el método $.ajax() de jQuery puedes obtener datos JSON de un fichero para después plasmarlos en un elemento HTML.

En este tutorial, te mostraremos cómo procesar una solicitud ajax utilizando jQuery y llamando a un script PHP que devuelva datos JSON. El script PHP extraerá los datos necesarios de la base de datos MySQL y los devolverá en formato JSON mediante ajax. Los datos devueltos serán analizados utilizando Javascript y se plasmarán los valores en los elementos en los que se requiera.

Llamada mediante Ajax al script PHP

Para que se entienda mejor, extraeremos la información de un usuario de ejemplo de la base de datos MySQL mediante un ID de usuario el cual lo pasaremos vía ajax utilizando jQuery, PHP y MySQL.

Creación de la base de datos

La tabla users gestiona la información básica de los usuarios. Nuestro script de ejemplo extraerá la información del usuario de esta tabla de ejemplo de usuarios.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `phone` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Código HTML

Mostraremos una caja de texto para introducir el ID del usuario del cual quieres obtener sus datos y un botón que inicie la petición ajax. Los datos del usuario aparecerán debajo de la caja de texto.

<input type="text" id="user_id" />
<input type="button" id="getUser" value="Get Details"/>
<div class="user-content" style="display: none;">
    <h4>User Details</h4>
    <p>Name: <span id="userName"></span></p>
    <p>Email: <span id="userEmail"></span></p>
    <p>Phone: <span id="userPhone"></span></p>
    <p>Register Date: <span id="userCreated"></span></p>
</div>

Código Javascript (jQuery & Ajax)

El método $.ajax() realiza una solicitud Ajax y envía el ID de usuario a un archivo PHP para obtener los detalles de dicho usuario de la base de datos. Si la solicitud tiene éxito, se devolverán los datos en el formato especificado dentro del parámetro dataType. En nuestro script de ejemplo, especificamos JSON en el dataType, por lo que los datos se devolverán en formato JSON.

<script>
$(document).ready(function(){
    $('#getUser').on('click',function(){
        var user_id = $('#user_id').val();
        $.ajax({
            type:'POST',
            url:'getData.php',
            dataType: "json",
            data:{user_id:user_id},
            success:function(data){
                if(data.status == 'ok'){
                    $('#userName').text(data.result.name);
                    $('#userEmail').text(data.result.email);
                    $('#userPhone').text(data.result.phone);
                    $('#userCreated').text(data.result.created);
                    $('.user-content').slideDown();
                }else{
                    $('.user-content').slideUp();
                    alert("User not found...");
                } 
            }
        });
    });
});
</script>

Script PHP (getData.php)

Este script será llamado por la petición Ajax. Extraeremos los datos del usuario de la base de datos utilizando PHP y MySQL basándonos en el ID del usuario. Se devolverán los datos en formato JSON.

<?php
if(!empty($_POST['user_id'])){
    $data = array();
    
    //database details
    $dbHost     = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '*****';
    $dbName     = 'noprog';
    
    //create connection and select DB
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    if($db->connect_error){
        die("Unable to connect database: " . $db->connect_error);
    }
    
    //get user data from the database
    $query = $db->query("SELECT * FROM users WHERE id = {$_POST['user_id']}");
    
    if($query->num_rows > 0){
        $userData = $query->fetch_assoc();
        $data['status'] = 'ok';
        $data['result'] = $userData;
    }else{
        $data['status'] = 'err';
        $data['result'] = '';
    }
    
    //returns data as JSON format
    echo json_encode($data);
}
?>