window.onload = function() { //Path to json file var url = "js/test.json" var request = new XMLHttpRequest(); //Set request method and path request.open("get", url); //Do not return data to the server request.send(null); request.onload = function() { //Execute this function after the XHR object obtains the return information if (request.status == 200) { //If the return status is 200, the data acquisition is successful var json = JSON.parse(request.responseText); console.log(json);//View the object generated by the obtained json file } } }
This is what I found on the Internet. I won't, but I can meet my needs
At this time, json should be loaded, but in the global console.log, an error will be reported
This is because json variables are declared locally. To access json globally, you need to
var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); } } } console.log(json);
In this way, I can finally access json, but at this time, I will find that json is not what I want
The data in json is supposed to render the page. You get it clearly. Why is it undefined?
In fact, he did get it, but there was something wrong with the timeline. The console.log in the last line here happened when the browser read this line of code, and you gave json a value after the page was loaded (window.onload). If you haven't given json a value, you need to print it on the page now. Of course, it only gives you undefined
var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); } } } setTimeout(function() { console.log(json); }, 1000)
Just add a timer like this
But it's still too slow to wait for a second. Can't you start after assigning a value to json?
Certainly.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="box"></div> </body> <script> var Box = document.getElementById("box") var json window.onload = function() { var url = "js/test.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function() { if (request.status == 200) { json = JSON.parse(request.responseText); showData(json) } } } function showData(data) { for (let i = 0; i < json.games.length; i++) { var gameName = json.games[i].name console.log(gameName); var p = document.createElement("p") p.innerHTML = gameName Box.appendChild(p) } } </script> </html>
showData is an event that I want to use json for, so I only need to run this event after json is assigned. Just pass json as a parameter
Attach the test.json that I used to do all the time
{ "games": [{ "name": "The adventures of Maya", "img": "http://imga4.5054399.com/upload_pic/2019/12/26/4399_16594503290.jpg" }, { "name": "Super evolution", "img": "http://imga4.5054399.com/upload_pic/2016/6/14/4399_09394759462.jpg" }, { "name": "Chinese version of the battle of the big head tribe", "img": "http://imga4.5054399.com/upload_pic/2016/5/19/4399_13442624802.jpg" }] }
