Question

我正在尝试使用AJAX动态生成一个表并使用Bootstrap显示，但我似乎无法让表显示。它只显示标题字段。任何帮助将不胜感激。

<button onclick="display();">Generate Table</button>
<div id="myTable"></div>




function display(){

  var HTML = "<table class='table table-striped table-bordered table-hover' style='width:500px'>";

  HTML += "<tr><th>Place</th><th>Description</th></tr>";

  var search = 106;

  makeRequest('findplace.php?searchbynumber='+search,function(data){
    var data = JSON.parse(data.responseText);
    for(var i = 0;i<data.length;i++){
      HTML += "<tr><td>" + data[i].place + "</td><td>" + data[i].description + "</td></tr>";
    }
  });

  HTML += "</table>";

  document.getElementById('myTable').innerHTML = HTML;
}

function makeRequest(url, callback) {
  var request;

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }

  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }

  request.open("GET", url, true);
  request.send();
}

Answer 1

Tim在评论中说，这与您在makeRequest中进行的通话的异步性质有关。

你基本上构建表的外部并添加HTML，然后稍后调用回调，构建一个新变量，并且永远不会对它做任何事情。

你有很多选择，但最简单的可能就是将HTML的创建转移到回调中并在从onreadychangestate返回时一次性构建它，并且你拥有输出所需的一切。 / p>

即。将所有HTML结构移动到您的回调中，问题就会消失：

function display(){

  var search = 106;

  makeRequest('findplace.php?searchbynumber='+search,function(data){

    var HTML = "<table class='table table-striped table-bordered table-hover' style='width:500px'>";

    HTML += "<tr><th>Place</th><th>Description</th></tr>";

    var data = JSON.parse(data.responseText);
    for(var i = 0;i<data.length;i++){
      HTML += "<tr><td>" + data[i].place + "</td><td>" + data[i].description + "</td></tr>";
    }

    HTML += "</table>";

    document.getElementById('myTable').innerHTML = HTML;

  });
}

function makeRequest(url, callback) {
  var request;

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }

  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }

  request.open("GET", url, true);
  request.send();
}

至于其他选择：

作为一个想法，你可以像你一样构建表的外部，但是在那里添加“加载...”文本，然后在回调中添加行 - 但是如果你正在寻找那个我会说这是读者的练习......

使用Javascript使用AJAX数据动态生成表

1 个答案: