Ajax vs Json – respuesta múltiple

Name: Ajax vs Json – respuesta múltiple
Brand: Jose Aguilar
SKU: joseaguilarblog-6866
Availability: InStock
Rating: 5 (11 reviews)

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 mediante PHP 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 en un formulario:

Source code

<form action="">
    <label for="id_product">Producto</label>
    <select id="id_product" class="form-control">
        <option value="0">Selecciona producto...</option>
        <?php
        require('config.php');
 
        $result = $conexion->query(
            "SELECT p.id_product, pl.name FROM `ps_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. Incluimos el archivo config.php para conectar 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:

Source code

<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>');
                }
 
            }
        });
    });
});
</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:

Source code

<?php
require_once('config.php');
 
$id_product = (int)$_POST['id_product'];
 
$result = $conexion->query(
    'SELECT * FROM `ps_product` p
        LEFT JOIN ps_product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
        WHERE p.id_product = '.$id_product
);
 
$data = $result->fetch_assoc();
 
$row = array(
    'name' => utf8_encode($data['name']),
    'reference' => $data['reference'],
    'version' => $data['version'],
    'compatibility' => $data['compatibility'],
    'active' => $data['active']
);
 
if (is_array($row)) {
    echo json_encode($row);
}
?>

Incluimos el archivo config.php para 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.

Ahora solo te queda saber que contiene el archivo config.php. Tan solo estamos conectando a la base de datos con MySQLi:

Source code

<?php
$conexion = new mysqli('localhost', 'USUARIO DE TU BASE DE DATOS', 'CONTRASEÑA DE TU BASE DE DATOS', 'NOMBRE DE TU BASE DE DATOS');
?>

¿Te ha resultado interesante? Envíanos tu comentario.

Ver demo Descargar

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(11 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

3 respuestas a “Ajax vs Json – respuesta múltiple”

MIKE dice:

09/08/2017 a las 18:38

Para entender bien la consulta

Responder
- Jose Aguilar dice:
  
  23/08/2017 a las 11:55
  
  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
  
  Responder
MIKE dice:

09/08/2017 a las 18:37

tienes la estructura de la base de datos

Responder