Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - Diegox04

Páginas1
#1
Desarrollo Web / Re: consultar Json mediante javascript
9 Diciembre 2018, 20:03 PM
amigo ya puse el Json en la ruta donde se encuentra el html pero me aparece el siguiente error con Google chrome

jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/Diego/Desktop/Inventario/datos.json'; from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send @ jquery.min.js:2

y con mozilla me muestra este error desde la consola:

La codificación de caracteres del documento HTML no ha sido declarada. El documento se mostrará con texto "basura" en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia. inventario.html
Error de lectura XML: error de sintaxis
Ubicación: file:///C:/Users/Diego/Desktop/Inventario/datos.json
Número de línea 1, columna 1: datos.json:1:1


el script utilizado fue este:
Código [Seleccionar]
<script type="text/javascript">
    function lee_json() {
        $.getJSON("datos.json", function(datos) {
            alert(datos["Serie"]);
            console.log(datos["Serie"]);
        });
    }
</script>

Saludos,
#2
Desarrollo Web / consultar Json mediante javascript
9 Diciembre 2018, 18:47 PM
Hola amigos,
tengo un problema que nose como solucionar, necesito consultar un archivo Json desde una pagina en html con javascript pero no lo logro, es para un proyecto.

dejo aqui el codigo que estoy usando en Html

Código (html5) [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Inventario General </title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <script type="text/javascript">

       function lee_json() {
           $.getJSON("c:/datos.json", function(datos) {
               alert(datos["Serie"]);
               console.add(datos["Serie"]);
           });
       }
   </script>

</head>


<body onload="lee_json();">

<header id="encabezado">
<div id="mainheader" >
<div class="logo izquierda">
<img src="images/logo.png">
</div>
</div>

<div id="busqueda">    
               <input type="text" placeholder="Busqueda">
       </div>
</header>

<div class="clear"></div>

<aside id="contenido">
<div>
<input type="text" placeholder="Serie" style="float: left;margin-left:40px; margin-bottom: 20px;">
<input type="text" placeholder="Nombre de equipo" style="margin-left:100px;" >
<input type="text" placeholder="Activo" style=" margin-left:100px;">
<input type="text" placeholder="Modelo" style="margin-left:100px;">
<input type="text" placeholder="Ubicacion" style="margin-left:100px;">
<div class="clear"></div>

<input type="text" placeholder="Persona responsable" style="float: left;margin-left:40px; margin-bottom: 20px;">
<input type="text" placeholder="Departamento" style="margin-left:100px;">
<input type="text" placeholder="Expiracion" style="margin-left:100px;">
<input type="text" placeholder="Sistema Operativo" style="margin-left:100px;">
<input type="text" placeholder="Descripcion" style="margin-left:100px;">

</div>

</aside>


<aside id="final">
<div class="logo2 izquierda">
<img src="images/logo.png" />
</div>
<div class="botones">
<p><button id="modificar" onclick="valida()" style="border: 1px solid black; margin: 10px;" >Modificar</button></p>
<p><button id="agregar" onclick="valida()" style="border: 1px solid black; margin: 10px;">Agregar</button></p>
<p><button id="eliminar" onclick="valida()" style="border: 1px solid black; margin: 10px;;">Eliminar</button></p>
<p><button id="atras" onclick="valida()" style="border: 1px solid black; margin: 10px;;">Atras</button></p>
<p><button id="siguiente" onclick="valida()" style="border: 1px solid black; margin: 10px;">Siguiente</button></p>
</div>

</aside>
</body>
</html>

luego el codigo en CSS.

Código (css) [Seleccionar]
body{
/* Elimina borde por defecto del navegador */
margin:0;
padding: 0;
font-family: 'Lato', sans-serif;
   font-size: 16px;
}

.clear{ /*limpia los margenes*/
margin:0;
padding: 0;
height: 0;
clear: both;
}
.izquierda{ /*acomoda lo que deseo al lado izquierdo del elemento deseado*/
float: left;
}

.derecha{ /*acomoda lo que deseo al lado derecho del elemento deseado*/
float: right;
}
#busqueda{/*acomoda el cuadro de busqueda*/
float: right;
width: 210px;
   margin-right: 160px;
   margin-top: 35px;
   
}

#encabezado{ /*edita la parte superior de la pagina*/
height:80px;
background-color:#c3c3c3;
}
.logo img{ /*ajusta el logo del encabezado al tamaño y posicion que deseo*/
width: 250px;
   margin-left: 160px;
   margin-top: 0px;
}

#contenido{ /*edita todo el cuadro del contenido*/
   height: 360px;
   background-position: center;
   padding: 47px;
   border: 1px solid black;
}


#final{ /*edita la parte inferior de la pagina*/
   margin-top:0px;
   background-color:#c3c3c3;
   height: -10px;
   background-position: center;
   padding: 50px;
}
.logo2 img{ /*ajusta el logo del final al tamaño y posicion que deseo*/
width: 200px;
   margin-left: -20px;
   margin-top: -40px;
}
.botones{
display:flex;
margin: -30px auto;
width: 60%;
}




y por ultimo el Json

Código (javascript) [Seleccionar]
[
{
"Serie1": "5CG53446JS",
"Nombre de equipo": "PAN2146JSL",
"activo": "646",
"Modelo": " HP ProBook 640 G1",
"Ubicación": "Panamá",
"Persona responsable": " Aida Medina",
"Departamento": "21",
"Expiracion": "29/08/2015",
"Sistema Operativo": "W10 ENT x64",
"Descripcion": "prueba"
},
{
"Serie": "5CG50936BF",
"Nombre de equipo": "CR3036BFL",
"activo": "556",
"Modelo": " HP ProBook 640 G1",
"Ubicación": "Evertec Tournon",
"Persona responsable": "Aaron Cordoba",
"Departamento": "30",
"Expiracion": "11/03/2015",
"Sistema Operativo": "W10 ENT x64",
"Descripcion": "prueba1"
},
{
"Serie": "5CG50936BF",
"Nombre de equipo": "CR3036BFL",
"activo": "556",
"Modelo": " HP ProBook 640 G1",
"Ubicación": "Evertec Tournon",
"Persona responsable": "diego",
"Departamento": "30",
"Expiracion": "11/03/2015",
"Sistema Operativo": "W10 ENT x64",
"Descripcion": "prueba1"
},
{
"Serie": "5CG50936BF",
"Nombre de equipo": "CR3036BFL",
"activo": "556",
"Modelo": " HP ProBook 640 G1",
"Ubicación": "Evertec Tournon",
"Persona responsable": "Steven",
"Departamento": "30",
"Expiracion": "11/03/2015",
"Sistema Operativo": "W10 ENT x64",
"Descripcion": "prueba1"
},
{
"Serie": "5CG50936BF",
"Nombre de equipo": "CR3036BFL",
"activo": "556",
"Modelo": " HP ProBook 640 G1",
"Ubicación": "Evertec Tournon",
"Persona responsable": "ale",
"Departamento": "30",
"Expiracion": "11/03/2015",
"Sistema Operativo": "W10 ENT x64",
"Descripcion": "prueba1"
},
{
"Serie": ""
}
]


estoy tratando de al menos hacer la conexion con el archivo que lance una alerta pero en consola me muestra el siguiente error

jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/datos.json'; from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

gracias de antemano, soy principiante y me gustaria un poco de ayuda.

Saludos,
Páginas1