Question

注意：我已经正确关闭了div标签，代码太长，因此发布了主要代码段。

我尝试了onclick事件，但该表未显示，因此我将代码改回了原来的

<body>




<button onclick="fetchAndDisplayData()">Click me</button>
                      <table id="id01" class='table table-bordered table-striped'>
                        <tbody>
                        <thead>

                          <tr>
                            <th>Title </th>

                            </tr>
                    </thead>
                        </tbody>
                      </table>
<script>
  function fetchAndDisplayData() {
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8888/api/get/read1.php";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }

};
xmlhttp.open("GET", url, true);
xmlhttp.send();
  function myFunction(arr) {
      var out = "";
      var i;
      for (i = 0; i < arr.length; i++) {
          out += '<tr><td><a href="' + arr[i].link + '">' +
              arr[i].title + '</a></td>';
          out += '<td>' + arr[i].description + '<br></td>';
          out += '<td>' + arr[i].log_time + '<br></td>';
          out += '<td><a href="' + arr[i].link + '">' +
              arr[i].link + '</a></td></tr>';
      }

      document.getElementById("#id01 tbody").innerHTML = out;

}
}
  </script>

</body>

我想要一个按钮，这样只有当我单击该按钮时，我才能得到这些条目。我可以进行哪些更改？请帮助我的代码。这是一个项目。

Answer 1

您的脚本必须这样修改：

<script>
var show = true;

function fetchAndDisplayData() {
    if (show) {
        show = false
        var xmlhttp = new XMLHttpRequest();
        var url = "http://localhost:8888/api/get/read1.php";

        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                myFunction(myArr);
            }

        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } else {
        show = true;
        myFunction([]);
    }
}

function myFunction(arr) {
    var out = "";
    var i;
    for (i = 0; i < arr.length; i++) {
        out += '<tr><td><a href="' + arr[i].link + '">' +
            arr[i].title + '</a></td>';
        out += '<td>' + arr[i].description + '<br></td>';
        out += '<td>' + arr[i].log_time + '<br></td>';
        out += '<td><a href="' + arr[i].link + '">' +
            arr[i].link + '</a></td></tr>';
    }
    document.getElementById("id01").getElementsByTagName('tbody')[0].innerHTML = out;
}

fetchAndDisplayData();
</script>

您的按钮应该改用以下处理程序代码：

<button onclick="fetchAndDisplayData()">Click me</button>

但是您的代码中还有其他错误（请参见上面的评论），我想这些更改不会立即使它起作用。

在按钮上调用javascript函数

1 个答案: