Question

我正在尝试使用通过Ajax调用从数据库查询中提取的数据填充。但是，我要填充的部分仍然为空。 JS在一个单独的文件中，该文件在HTML末尾导入。用于填充的函数调用也位于末尾，所以我知道这不是ID尚不存在的问题。

这是我的onreadystatechange函数的内容：

  if (this.readyState == 4 && this.status == 200)
  {
     const data = JSON.parse(this.responseText);

     cards =  "";
     for (x in data)
     {
        cards +=
           " <!-- Story Card -->\n" +
           "<div class=\"card filterDiv State3\" style=\"width: auto;\">\n" +
           "   <div class=\"card-body\">\n" +
           "      <h5 class=\"card-title\">State 3 Card title</h5>\n" +
           "      <h6 class=\"card-subtitle mb-2 text-muted\">Card subtitle</h6>\n" +
           "      <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's content.</p>\n" +
           "   </div>\n" +
           "</div> <!--End Story Card --> \n"
     }
     console.log(cards);
     document.getElementById("left-col").innerHTML = cards;
  }

我添加了对console.log的调用，以确认PHP文件正在返回正确数量的结果（并且现已删除的警报确认JSON具有所有正确信息且没有错误），并且所有内容都将打印到控制台正确，但元素未更新。这是哪里：

<div id="left-col">
    <!-- To be populated by cards.js -->
</div>

相同的方法适用于页面的不同区域，因此我并不期望与此相关的任何问题。我在这里想念什么？

JavaScript innerHTML未填充

0 个答案: