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
luego el codigo en CSS.
y por ultimo el Json
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,
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,