Question

我有以下代码，它从数组中获取所有数据，然后将其显示在HTML文档中的某个div中。现在数据嵌入到代码中，但我需要从URL中获取相同的数据。如您所见，我已经启动了XHR请求＆amp;测试它的检索成功。我只是不确定一旦从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)
}

Answer 2

想出来并希望分享。谢谢你的帮助！

***不要忘记使用您的JSON数据的URL更改http://example.com。

＆＃13;

function getData(callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            callback(data);
        }
    }
    xhr.open('GET', 'http://example.com', true);
    xhr.send();
}

function renderData(data) {
    console.log(data);
    var html = data.pois.slice(0,3).reduce(function (frag, item) {
        frag.appendChild(pios(item));
        return frag;
    }, document.createDocumentFragment());
    document.getElementById('locations').appendChild(html);
}

function pios(item) {
    var p = document.createElement('pre');
    p.id = item.id;
    p.textContent = item.address_1 + '\n' + item.city + ' ' + item.region + ' ' + item.postal_code;
    return p;
}

getData(renderData);

＆＃13;

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

＆＃13;

从URL＆amp;获取JSON数据使用innerHTML显示它 - 怎么样？

2 个答案: