javascript - 从 URL 获取 JSON 数据并使用 innerHTML 显示它 - 如何？

Question

我有以下代码，它从数组中获取所有数据，然后将其显示在 HTML 文档中的某个 div 中。现在数据已嵌入到代码中，但我需要从 URL 获取相同的数据。如您所见，我已经启动了 XHR 请求并测试了它的检索是否成功。我只是不确定从 URL 中获取数据后如何像现在一样在 HTML 中显示它？

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

// LOAD AND DISPLAY LOCATION DATA
window.onload=function(){
var data = [ 
	{"id":1271832,"segment_id":3345,"latitude":37.7029,"longitude":-121.9335,"name":"Verve","address_1":"7886 Dublin Blvd","phone_number":"555-324-5678","postal_code":"94568","postal_code_id":"7168","metro":"San Francisco-Oakland-San Jose CA","city":"Dublin","region":"CA","country":"US","m":4934,"km":4.9,"miles":3.07},
	{"id":1271836,"segment_id":3345,"latitude":37.6958,"longitude":-121.9255,"name":"Verve","address_1":"1 Stoneridge Mall Space","phone_number":"555-324-5678","postal_code":"94588","postal_code_id":"7169","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasanton","region":"CA","country":"US","m":5045,"km":5,"miles":3.14},
	{"id":1271831,"segment_id":3345,"latitude":37.6931,"longitude":-121.9262,"name":"Verve","address_1":"1120 Stoneridge Mall Drive","phone_number":"555-324-5678","postal_code":"94566","postal_code_id":"7167","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasanton","region":"CA","country":"US","m":5325,"km":5.3,"miles":3.31},
	{"id":1271827,"segment_id":3345,"latitude":37.6999,"longitude":-121.7452,"name":"Verve","address_1":"4408 Las Positas Rd","phone_number":"555-324-5678","postal_code":"94551","postal_code_id":"7138","metro":"San Francisco-Oakland-San Jose CA","city":"Livermore","region":"CA","country":"US","m":13375,"km":13.4,"miles":8.31},
	{"id":1271826,"segment_id":3345,"latitude":37.6966,"longitude":-122.0771,"name":"Verve","address_1":"3450 Village Dr","phone_number":"555-324-5678","postal_code":"94546","postal_code_id":"7133","metro":"San Francisco-Oakland-San Jose CA","city":"Castro Valley","region":"CA","country":"US","m":16796,"km":16.8,"miles":10.44},
	{"id":1271838,"segment_id":3345,"latitude":37.8948,"longitude":-122.0591,"name":"Verve","address_1":"1295 S Main St","phone_number":"555-324-5678","postal_code":"94596","postal_code_id":"7292","metro":"San Francisco-Oakland-San Jose CA","city":"Walnut Creek","region":"CA","country":"US","m":23294,"km":23.3,"miles":14.48},
	{"id":1271833,"segment_id":3345,"latitude":37.7114,"longitude":-122.1638,"name":"Verve","address_1":"1285 Marina Boulevard","phone_number":"555-324-5678","postal_code":"94577","postal_code_id":"7170","metro":"San Francisco-Oakland-San Jose CA","city":"San Leandro","region":"CA","country":"US","m":24055,"km":24.1,"miles":14.95},
	{"id":1271819,"segment_id":3345,"latitude":37.9499,"longitude":-121.9603,"name":"Verve","address_1":"5412 Ygnacio Valley Rd","phone_number":"555-324-5678","postal_code":"94521","postal_code_id":"7254","metro":"San Francisco-Oakland-San Jose CA","city":"Concord","region":"CA","country":"US","m":24926,"km":24.9,"miles":15.49},
	{"id":1271817,"segment_id":3345,"latitude":37.9435,"longitude":-121.7376,"name":"Verve","address_1":"2520 Sand Creek Rd","phone_number":"555-324-5678","postal_code":"94513","postal_code_id":"7248","metro":"San Francisco-Oakland-San Jose CA","city":"Brentwood","region":"CA","country":"US","m":27090,"km":27.1,"miles":16.84},
	{"id":1271820,"segment_id":3345,"latitude":37.9452,"longitude":-122.0627,"name":"Verve","address_1":"157 Crescent Plaza","phone_number":"555-324-5678","postal_code":"94523","postal_code_id":"7256","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasant Hill","region":"CA","country":"US","m":28030,"km":28,"miles":17.42}	
  ];

data.forEach(function (item) {
    pios(item)
})

function pios(item) {
    var p = document.createElement('p');
    p.id = item.id;
    p.innerHTML = item.address_1 + '<br>' + item.city + item.region + item.postal_code;
    document.getElementById('locations').appendChild(p)
}
}

<div id="locations"></div>

Answer 1

您需要将 onreadystatechange 添加到您的 xhr 中:

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function (item) {
            pios(item);
        });
    }
}
xhr.open("GET", url, true);
xhr.send();

这包括您提供的完整方法并将其链接到 onload。

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            data.forEach(function (item) {
                pios(item);
            });
        }
    }
    xhr.open('GET', 'http://example.com', true);
    xhr.send();
};

function pios(item) {
    var p = document.createElement('p');
    p.id = item.id;
    p.innerHTML = item.address_1 + '<br>' + item.city + item.region + item.postal_code;
    document.getElementById('locations').appendChild(p)
}