• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Portada Boludo
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 BolUDO

 

De JSON a JavaScript (utilizando utilizando la función parse)

Tweet
 

domingo julio 10, 2016

23 - De JSON a JavaScript (utilizando utilizando la función parse)


Habíamos visto que para convertir una cadena que contiene información en formato JSON solo debíamos utilizar la función parse del objeto JSON de JavaScript.

Nos concentraremos nuevamente en como convertir un archivo JSON que viene del servidor y lo debemos convertir a un objeto literal en JavaScript.

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>
<body>
  <h2>Recuperar datos enviados del servidor en formato JSON y luego convertido a objeto literal en el cliente.</h2>
  <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;
  conexion1.open('GET','pagina1.php', true);
  conexion1.send();
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    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...";
  }
}

En la función procesarEventos debemos llamar al método parse del objeto JSON pasando el archivo recuperado del servidor:

    var datos=JSON.parse(conexion1.responseText);

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;
?>


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.


pagina1.html



Ejecutar ejemplo



funciones.js




pagina1.php


Retornar

— @bolUDOoficial

— Síguenos en Twitter@bolUDOoficial

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 JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
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


« De JavaScript a JSON (utilizando la función stringify del objeto JSON)  |  De JSON a PHP (utilizando la función json_decode) »
 
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 Boludo 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/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/@boludo.oficial
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/@sergioaleman
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/@infoudooficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955 - 0412 8226575) - 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 Boludo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR