Ajax vs Json – respuesta múltiple

Ajax son las siglas de Asynchronous JavaScript And XML y es una tecnología que permite a una página web actualizarse de forma dinámica sin recargarse completamente.

JavaScript es el encargado de comunicarse con el servidor enviando y recibiendo datos desde la página web, en el servidor la solicitud es procesada y se envía una respuesta que es interpretada de nuevo por JavaScript en la página web.

JSON (JavaScript Object Notation) surgió más tarde aportando más ligereza y con una notación más simple convirtiéndose en el formato más utilizado para el intercambio de datos cuándo se trabaja con Ajax. Ver más información sobre JSON.

Una de las principales ventajas de utilizar JSON en las llamadas AJAX es que resulta muy sencillo pasar los datos de un array del servidor y utilizarlos en el success de la llamada. Esto lo entenderás mejor viendo el código del ejemplo.

En el ejemplo en funcionamiento que hemos preparado tenemos un selector de productos que al seleccionar uno te muestra alguna información del mismo en un contenedor que tenemos preparado.

Partimos de un fichero principal en el que añadiremos nuestra consulta a la base de datos y nuestro selector de productos:

<form action="">
<label for="id_product">Producto</label>
<select id="id_product" class="form-control">
<option value="0">Selecciona producto...</option>
<?php
$conexion = new mysqli('localhost', 'USUARIO', 'CONTRAEÑA', 'BASE DE DATOS');
 
$result = $conexion->query(
    "SELECT p.id_product, pl.name FROM `product` p
        LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
        WHERE id_category_default != 18 AND id_category_default != 20
        ORDER BY name ASC"
);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {                
        echo '<option value="'.$row['id_product'].'">'.utf8_encode($row['name']).'</option>';
    }
}
?> 
</select>
</form>
<div class="result"></div>

Revisando un poco el código te darás cuenta que tenemos un selector al cual le estamos añadiendo opciones de una tabla de nuestra base de datos. Estamos conectando con nuestra base de datos y ejecutando una consulta que nos retornará varios registros, en este caso, productos que depositamos en las opciones de nuestro selector.

El último contenedor o div con class=”result” aunque te parezca extraño que esté vacío será nuestro contenedor para añadir el resultado.

En la cabecera de este archivo o página añadiremos la librería jQuery entre otras y la captura del evento que controla cuando cambia el valor de nuestro selector:

<script>
$(document).ready(function(){
    $('#id_product').on('change', function() {
        var dataString = 'id_product='+$('select#id_product').val();
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: dataString,
            dataType: "json",
            success: function(response) {
                $('.result').empty();
                if (response.active != "1") {
                    $('.result').append('<p class="alert alert-error">Produto no disponible</p>');
                }
                else {
                    $('.result').append('<h1>'+response.name+'</h1>');
                    $('.result').append('<p>Referencia: <strong>'+response.reference+'</strong></p>');
                    $('.result').append('<p style="color:red;">Version: '+response.version+'</p>');
                    $('.result').append('<p style="color:green;">Compatibilidad: '+response.compatibility+'</p>');
                }
 
            }
        });
        return false;
    });
});
</script>

En esta parte del código está la clave del asunto. Este código Javascript captura el cambio de nuestro selector para hacer una llamada Ajax que nos retornará un objeto tipo JSON. Para ello es importante declarar en la llamada Ajax que el retorno será JSON utilizando:

dataType: "json",

En el success puedes ver que la respuesta la estamos tratando como un objeto del cual recibimos diversas informaciones como por ejemplo el nombre, la referencia, entre otros datos que procesaremos. Esto resulta ser muy útil cuando necesitas recibir del servidor más de una respuesta.

El archivo ajax.php que utilizamos para nuestra llamada Ajax contiene el código que se ejecuta en el servidor sin recargar la página. Contiene el siguiente código:

<?php
$conexion = new mysqli('localhost', 'USUARIO', 'CONTRASEÑA', 'BASE DE DATOS');
 
mysqli_query('SET CHARACTER SET utf8');
 
$id_product = (int)$_POST['id_product'];
 
$result = $conexion->query(
    'SELECT * FROM `product` p
        LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
        WHERE p.id_product = '.$id_product
);
 
$row = $result->fetch_assoc();
 
if (is_array($row))
    echo json_encode($row);
?>

Volvemos a conectar con nuestra base de datos para obtener más información sobre el producto seleccionado.

Al final de todo retornamos el array con toda la información sobre el producto utilizando la función json_decode().

De esta forma, en el success de nuestro Ajax podremos usar la respuesta como un objeto que contiene múltiple información.

Si te ha servido este tutorial hazte fan de la página de facebook del blog Jose Aguilar y estate al tanto de nuestra novedades.

Ver ejemplo en funcionamiento

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

3 comentarios para “Ajax vs Json – respuesta múltiple

  • MIKE dice:

    tienes la estructura de la base de datos

  • MIKE dice:

    Para entender bien la consulta

    • Jose Aguilar dice:

      Hola buenas tardes,

      La estructura de las tablas que estamos usando en el ejemplo las puedes sacar de una instalación limpia de PrestaShop. Te las detallo a continuación:

      CREATE TABLE `ps_product` (
      `id_product` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
      `id_supplier` INT(10) UNSIGNED NULL DEFAULT NULL,
      `id_manufacturer` INT(10) UNSIGNED NULL DEFAULT NULL,
      `id_category_default` INT(10) UNSIGNED NULL DEFAULT NULL,
      `id_shop_default` INT(10) UNSIGNED NOT NULL DEFAULT ‘1’,
      `id_tax_rules_group` INT(11) UNSIGNED NOT NULL,
      `on_sale` TINYINT(1) UNSIGNED NOT NULL DEFAULT ‘0’,
      `online_only` TINYINT(1) UNSIGNED NOT NULL DEFAULT ‘0’,
      `ean13` VARCHAR(13) NULL DEFAULT NULL,
      `upc` VARCHAR(12) NULL DEFAULT NULL,
      `ecotax` DECIMAL(17,6) NOT NULL DEFAULT ‘0.000000’,
      `quantity` INT(10) NOT NULL DEFAULT ‘0’,
      `minimal_quantity` INT(10) UNSIGNED NOT NULL DEFAULT ‘1’,
      `price` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `wholesale_price` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `unity` VARCHAR(255) NULL DEFAULT NULL,
      `unit_price_ratio` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `additional_shipping_cost` DECIMAL(20,2) NOT NULL DEFAULT ‘0.00’,
      `reference` VARCHAR(32) NULL DEFAULT NULL,
      `supplier_reference` VARCHAR(32) NULL DEFAULT NULL,
      `location` VARCHAR(64) NULL DEFAULT NULL,
      `width` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `height` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `depth` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `weight` DECIMAL(20,6) NOT NULL DEFAULT ‘0.000000’,
      `out_of_stock` INT(10) UNSIGNED NOT NULL DEFAULT ‘2’,
      `quantity_discount` TINYINT(1) NULL DEFAULT ‘0’,
      `customizable` TINYINT(2) NOT NULL DEFAULT ‘0’,
      `uploadable_files` TINYINT(4) NOT NULL DEFAULT ‘0’,
      `text_fields` TINYINT(4) NOT NULL DEFAULT ‘0’,
      `active` TINYINT(1) UNSIGNED NOT NULL DEFAULT ‘0’,
      `redirect_type` ENUM(”,’404′,’301′,’302′) NOT NULL DEFAULT ”,
      `id_product_redirected` INT(10) UNSIGNED NOT NULL DEFAULT ‘0’,
      `available_for_order` TINYINT(1) NOT NULL DEFAULT ‘1’,
      `available_date` DATE NOT NULL DEFAULT ‘0000-00-00’,
      `condition` ENUM(‘new’,’used’,’refurbished’) NOT NULL DEFAULT ‘new’,
      `show_price` TINYINT(1) NOT NULL DEFAULT ‘1’,
      `indexed` TINYINT(1) NOT NULL DEFAULT ‘0’,
      `visibility` ENUM(‘both’,’catalog’,’search’,’none’) NOT NULL DEFAULT ‘both’,
      `cache_is_pack` TINYINT(1) NOT NULL DEFAULT ‘0’,
      `cache_has_attachments` TINYINT(1) NOT NULL DEFAULT ‘0’,
      `is_virtual` TINYINT(1) NOT NULL DEFAULT ‘0’,
      `cache_default_attribute` INT(10) UNSIGNED NULL DEFAULT NULL,
      `date_add` DATETIME NOT NULL,
      `date_upd` DATETIME NOT NULL,
      `advanced_stock_management` TINYINT(1) NOT NULL DEFAULT ‘0’,
      `pack_stock_type` INT(11) UNSIGNED NOT NULL DEFAULT ‘3’,
      PRIMARY KEY (`id_product`),
      INDEX `product_supplier` (`id_supplier`),
      INDEX `product_manufacturer` (`id_manufacturer`, `id_product`),
      INDEX `id_category_default` (`id_category_default`),
      INDEX `indexed` (`indexed`),
      INDEX `date_add` (`date_add`)
      )
      COLLATE=’utf8_general_ci’
      ENGINE=InnoDB
      AUTO_INCREMENT=8
      ;

      CREATE TABLE `ps_product_lang` (
      `id_product` INT(10) UNSIGNED NOT NULL,
      `id_shop` INT(11) UNSIGNED NOT NULL DEFAULT ‘1’,
      `id_lang` INT(10) UNSIGNED NOT NULL,
      `description` TEXT NULL,
      `description_short` TEXT NULL,
      `link_rewrite` VARCHAR(128) NOT NULL,
      `meta_description` VARCHAR(255) NULL DEFAULT NULL,
      `meta_keywords` VARCHAR(255) NULL DEFAULT NULL,
      `meta_title` VARCHAR(128) NULL DEFAULT NULL,
      `name` VARCHAR(128) NOT NULL,
      `available_now` VARCHAR(255) NULL DEFAULT NULL,
      `available_later` VARCHAR(255) NULL DEFAULT NULL,
      PRIMARY KEY (`id_product`, `id_shop`, `id_lang`),
      INDEX `id_lang` (`id_lang`),
      INDEX `name` (`name`)
      )
      COLLATE=’utf8_general_ci’
      ENGINE=InnoDB;

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*