{"name": "Fer", "country": "Spain"}El objetivo es conseguir que la información del archivo JSON se mustren en la página web después de que el usuario pulse sobre un botón.
Versión 1
El ejemplo puede verse funcionando en el sigueinte enlace.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Petición AJAX a un JSON</title> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>Formulario</h1> <form> <p> <label for="misDatos">Datos: </label> <input id="mitexto" type="text" name="misDatos" placeholder="Pulse el botón para ver la información" size="33" disabled> <br> <p> <button type="button" onclick="loadJSONdoc()">Obtener</button> </p> </form> </body> </html>
JavaScript
function loadJSONdoc(){
var req;
if (window.XMLHttpRequest){ //para IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}else{ //para IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
var mijson = JSON.parse(req.responseText);
var respuesta=mijson.name+" es de "+mijson.country;
document.getElementById("mitexto").value = respuesta;
}
};
req.open("GET", "ejemploJSON.json", true);
req.send()
} ejemploJSON.json
{
"name": "Fer",
"country": "Spain"
}
Versión 2
mijson.cars[1].
HTML
JavaScript
function loadJSONdoc(){
var req=new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
var mijson = JSON.parse(req.responseText);
var respuesta=mijson.name+" tiene "+mijson.cars[1];
document.getElementById("mitexto").value = respuesta;
}
};
req.open("GET", "ejemploJSON.json", true);
req.send()
}
ejemploJSON.json
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat", "WV" ]
} Versión 3
En esta ocasión el fichero JSON es aún más complejo y necesitaremos bucear un poco más usándo índices y entrando en arrays. Así,mijson.cars[2].models[1].
HTML
JavaScript
function loadJSONdoc(){
var req;
var req=new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
var mijson = JSON.parse(req.responseText);
var respuesta=mijson.name+" tiene "+mijson.cars[2].models[1];
document.getElementById("mitexto").value = respuesta;
}
};
req.open("GET", "ejemploJSON.json", true);
req.send()
}
ejemploJSON.json
{
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
No hay comentarios:
Publicar un comentario