• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Infoudo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en InfoUDO

 

De PHP a JSON (utilizando la función json_encode)

Tweet
 

domingo julio 10, 2016

21 - De PHP a JSON (utilizando la función json_encode)


En el concepto anterior habíamos visto como generar un archivo con formato JSON en el servidor y enviárselo al cliente (navegador). Esta metodología de generar el string con formato JSON puede ser muy engorroso cuando las estructuras comienzan a ser más complejas.

Se cuenta en PHP con una función que nos facilita dicha actividad llamada json_encode.

Confeccionaremos un problema que rescate un conjunto de registros de una tabla MySQL y seguidamente los transforme en formato JSON. En el navegador mediante el méetodo parse del objeto JSON generaremos un objeto literal JavaScript y procederemos a mostrarlo.

El problema que resolveremos es el siguiente:
Se tiene una tabla llamada "perifericos" donde almacenamos el código, descripción y precio de distintos periféricos de computadoras. Generar un archivo JSON en el servidor y proceder a mostrar los datos de los periféricos en el navegador.

pagina1.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>
<body>
  <h2>Recuperar datos del servidor almacenados en una base de datos en formato JSON utilizando la función json_encode</h2>
  <br>
  <input type="button" value="Recuperar" id="boton1">
  <div id="resultados"></div>
</body>
</html>

Este archivo no tiene nada nuevo.

Lo más interesante y nuevo se presenta en el archivo pagina1.php:

<?php
header('Content-Type: text/txt; charset=utf-8');
$conexion=mysqli_connect("localhost","root","","bdajax") or
    die("Problemas con la conexión");

$registros=mysqli_query($conexion,"select codigo,descripcion,precio from perifericos") or 
  die("Problemas en el select".mysqli_error($conexion));

while ($reg=mysqli_fetch_array($registros))
{
  $vec[]=$reg;
}

$cad=json_encode($vec);
echo $cad;
?>

Lo primero que hacemos es guardar todos los registros de la tabla perifericos en el vector llamado $vec, esto mediante el ciclo:

while ($reg=mysqli_fetch_array($registros))
{
  $vec[]=$reg;
}

Luego llamamos a la función json_encode:

$cad=json_encode($vec);

Ahora ya tenemos en la variable $cad el contenido del vector en formato JSON.

Procedemos seguidamente a la salida de esta cadena:

echo $cad;

Luego el archivo JavaScript es:

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('boton1');
  ob.addEventListener('click',presionBoton,false);
}

var conexion1;
function presionBoton(e)
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php', true);
  conexion1.send();
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    alert('Cadena en formato JSON:  '+conexion1.responseText);

    var datos=JSON.parse(conexion1.responseText);
    var salida='';
    for(var f=0;f<datos.length;f++)
    {
      salida += 'Codigo:'+datos[f].codigo+"<br>";
      salida += 'Descripcion:'+datos[f].descripcion+"<br>";
      salida += 'Precio:'+datos[f].precio+"<br><br>";
    }
    resultados.innerHTML = salida;
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

La función procesarEventos rescata los datos enviados por el servidor y los muestra inicialmente tal como llegan en una ventana mediante el comando alert:

    alert('Cadena en formato JSON:  '+conexion1.responseText);

Podemos ver que se trata de un string JSON correctamente formado.

Ahora sí mediante el método parse del objeto JSON transformamos el string:

    var datos=JSON.parse(conexion1.responseText);
    var salida='';
    for(var f=0;f<datos.length;f++)
    {
      salida += 'Codigo:'+datos[f].codigo+"<br>";
      salida += 'Descripcion:'+datos[f].descripcion+"<br>";
      salida += 'Precio:'+datos[f].precio+"<br><br>";
    }
    resultados.innerHTML = salida;

Para este problema posiblemente es más fácil generar un trozo de HTML en el servidor y en el navegador solo mostrarlo, pero hay muchas situaciones que necesitamos recuperar una estructura de datos del servidor y proceder a su procesamiento en el navegador.



Problema resuelto.


Se tiene una tabla llamada "perifericos" donde almacenamos el código, descripción y precio de distintos periféricos de computadoras. Generar un archivo JSON en el servidor y proceder a mostrar los datos de los periféricos en el navegador. Utilizar la librería JSON.php para facilitar la generación del archivo JSON en el servidor.


pagina1.html



Ejecutar ejemplo



funciones.js




pagina1.php


Problema propuesto.

Modificar el problema planteado para permitir consultar los datos de un periférico ingresando el código para su búsqueda.


Ver solución



pagina1.html

<!DOCTYPE html> <html> <head> <meta charse="utf-8"> <title>Problema</title> <script src="funciones.js"></script> </head> <body> <h2>Recuperar datos del servidor almacenados en una base de datos en formato JSON utilizando la librería JSON.php</h2> <br> Ingrese el código del artículo: <input type="text" name="codigo" id="codigo" size="5"><br> <input type="button" value="Recuperar" id="boton1"> <div id="resultados"></div> </body> </html>

funciones.js

addEventListener('load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('boton1'); ob.addEventListener('click',presionBoton,false); } var conexion1; function presionBoton(e) { conexion1=new XMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; var codigo=document.getElementById('codigo').value; conexion1.open('GET','pagina1.php?codigo='+codigo, true); conexion1.send(); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { alert('Cadena en formato JSON: '+conexion1.responseText); var datos=eval("(" + conexion1.responseText + ")"); var salida=''; if (datos.length>0) { salida += 'Codigo:'+datos[0].codigo+"<br>"; salida += 'Descripcion:'+datos[0].descripcion+"<br>"; salida += 'Precio:'+datos[0].precio+"<br><br>"; } else salida='No existe ese codigo.'; resultados.innerHTML = salida; } else { resultados.innerHTML = "Cargando..."; } }

pagina1.php

<?php header('Content-Type: text/txt; charset=utf-8'); $conexion=mysqli_connect("localhost","root","","bdajax") or die("Problemas con la conexión"); $registros=mysqli_query($conexion,"select codigo,descripcion,precio from perifericos where codigo=$_REQUEST[codigo]") or die("Problemas en el select".mysqli_error($conexion)); if ($reg=mysqli_fetch_array($registros)) { $vec[]=$reg; } else $vec=''; $cad=json_encode ($vec); echo $cad; ?>
  Ejecutar ejemplo	

Retornar

— @INFOUDO.OFICIAL

— Síguenos en Facebook@INFOUDO.OFICIAL

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)
Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
Recuperar datos del servidor en formato JSON
Qué es JSON?
Encuenta con AJAX
Autocompletar un control de tipo text
Mostrar un tooltip con datos recuperados del servidor en forma asincrónica


« Recuperar datos del servidor en formato JSON  |  De JavaScript a JSON (utilizando la función stringify del objeto JSON) »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Infoudo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/channel/UCuicPxpqv3C0p1qwaO1XSSQ
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/channel/UCqcLSYCKx9pamla68nFMDkw
Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/channel/UCJDooTJmROzAkBcbRrryvGA

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Infoudo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR