Question

继续开发我的第一个网络服务，面临一个新问题...... 我有一个javascript函数，它提供了一个JSON对象作为数组。

function RequestData(i){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/getitemID='+i, true);
    xhr.send();
    xhr.onreadystatechange = function() { // (3)
        if (xhr.readyState != 4) return;
        if (xhr.status != 200) {
            alert(xhr.status + ': ' + xhr.statusText);
        } else {
            alert(xhr.responseText);
            var jsonData = JSON.parse(xhr.responseText);
            for (var j=0; j< jsonData.length; j++  ){
                alert(jsonData[j].name);
            }
        }

    }
    xhr.close();
}

在jsonData中有一个包含实体的数组，如“name”，“description”等

问题是，如何在页面的html主体上显示生成的JSON数组？比如for或foreach周期

只需要一个简单的例子。想象一下JS文件如何构成页面的内容

var contentString = '<div id="content">'+
    '<div id="bodyContent">'+
    '<button onclick="RequestData('+i+')">Load Data!</button>'+
    '</div>'+
    '</div>';

我想将RequestData（）函数的结果插入到变量“var contentString”的内容中

Answer 1

for (var j=0; j< jsonData.length; j++  ){
    GetHTML(j);
}

function GetHTML(j) {
    var divwrapper =  document.CreateElement('div');
    var innerdivwrapper =  document.CreateElement('div');
    var textnode = document.createTextNode("my Name :" + j.Name + 'desc' + j.Description); 
    innerdivwrapper.appendChild(textnode);
    divwrapper.appendChild(innerdivwrapper);
    document.getElementsByTagName('body').appendChild(divwrapper);
}

Answer 2

你应该在这里使用回调。

function RequestData(i, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/getitemID='+i, true);
    xhr.send();
    xhr.onreadystatechange = function() { // (3)
        if (xhr.readyState != 4) return;
        if (xhr.status != 200) {
            alert(xhr.status + ': ' + xhr.statusText);
        } else {

            // pass the parsed data as the parameter of the callback
            callback(JSON.parse(xhr.responseText));
        }

    }
    xhr.close();
}

// i is the id we're passing into the function
// and that is used in the xhr.open command
// this is an example
var i = 23;

// i gets passed in as the first parameter,
// the json gets passed as the second parameter to the callback
RequestData(i, function (json) {

  // we create a little template using an array
  var tmpl = [
    '<div id="content"><div id="bodyContent">',
    '<button onclick="RequestData(#name)">Load Data!</button></div></div>'
  ].join('');

  var body = document.querySelector('body');

  for (var i = 0, l = json.length; i < l; i++) {

     // replace the name in the template with the json name for that index
     var html = tmpl.replace('#name', json[i].name);

     // use insertAdjacentHTML to add that HTML string to the body element
     body.insertAdjacentHTML('afterbegin', html);
  }

});

您可以在广泛支持的insertAdjacentHTML on the MDN page上阅读更多内容（这是我第一次听说过它！）。 And here's an example of it working

如何在html页面上显示javascript的结果数组

2 个答案: