Question

我想以表格形式显示从服务器到我的HTML页面的JSON数据。我创建了一个js函数来执行此操作：

function saveImage(){

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

  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          // Optionally, here you can update the dom to have a table in "responseDiv"
       //  document.getElementById("myDiv").innerHTML = "<pre>" + xmlhttp.responseText + "</pre>";
            var items= document.getElementById("myDiv").innerHTML;
          var test = items.xmlhttp.responseText

          $table = "<table id = 'resultTable'><td>Digits</td><td>Probability</td><tr>";

            for (var i = 0; i < test.length; i++) {

                $table += "<tr>";

                var it = test[i];

                $table += "<td>" + test[i].Digits + "</td>";

                $table += "<td>" + test[i].Probability + "</td>";


                 //alert(items[i].duration);
                $table += "</tr>";

            }

            $table += "</table>";

            $('myDiv').append($table);
            $table = "<table id = 'resultTable'><td>Digits</td><td>Probability</td><tr>";
      }
  }
  xmlhttp.open("POST", "analyzeImage", true);
  // Convert the canvas data to a data-uri encoded PNG image
  var dataURIPostBody = canvas.toDataURL("image/png");
//  window.open(dataURIPostBody, '_blank', 'location=0, menubar=0');
  xmlhttp.send(dataURIPostBody);
}

我的HTML代码是：

<div class="col-md-3" id="myDiv">
    <h4>Confusion Matrix</h4>
    <div class="table-responsive" style="width: 250px;">
    </div>
  </div>

但是没有任何内容显示在我的HTML页面上。任何帮助将非常感激。感谢。

Answer 1

<tr>标记在for循环之外和for循环内打开，只关闭一次，这是错误的。看看

Answer 2

你的xmlhttp.responseText仍然是文本格式，你需要使用json包等json包将它解析成json对象，所以得到json2.js并在你的html代码中引用它然后你可以调用JSON。解析（xmlhttp.respoonseText）将您的responsetext转换为json数组。我也改变了你构建表的方式，我还没有测试你的代码，但我在多个地方使用它并且它可以工作。

<script type="text/javascript" src="json2.js"></script>


xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        try
        {
           var test = JSON.parse(xmlhttp.responseText);

           var table      = $("#resultTable").get(0);
          var row = table.insertRow();
          var cell1 = row.insertCell();
          var cell2 = row.insertCell();
          cell1.innerHTML = "Digits";
          cell2.innerHTML = "Probability";

            for (var i = 0; i < test.length; i++) {

                row = table.insertRow();
                cell1 = row.insertCell();
                cell2 = row.insertCell();
                cell1.innerHTML = test[i].Digits;
                cell2.innerHTML = test[i].Probability;
            }
        }
        catch(ex)
        {
          alert(ex.message+": Error parsing server response, "+xmlhttp.responseText);
        }

      }
  }

在div部分的html代码中添加一个表，以便在构建表的内容时可以在js代码中引用它，

<div class="col-md-3" id="myDiv">
        <h4>Confusion Matrix</h4>
        <div class="table-responsive" style="width: 250px;">
         <table id='resultTable'>
         </table>
        </div>
      </div>

JSON到HTML表转换

2 个答案: