Onclick事件打开新页面并通过使用javascript

Question

我试图通过调用API并在表中加载数据来在新页面上显示表。单击menuItem即可加载此页面。

但是我面临的问题是表格正在显示，而不是我想要的数据。我知道我可以从API提取数据，因为我可以在控制台日志中看到它。

代码如下：

在第一个html文件中，我单击菜单并调用我要加载的下一个html页面 并且还给了我的id =“ covidLink”，我在我的JS文件中进行了调用。

pan.html

        <div class="navbar">
              <a class="covidText" id="covidLink" href="covidStatusUpdate.html">Covid-19</a>
        </div>

在下面的js文件中，im调用api并将数据附加到tbody中。

Fetchdata.js

    $(document).ready(function () {
            
      $("#covidLink").click(function () {
      console.log("Link clicked...");
      requestVirusData();
                   
      });
    });

    function requestVirusData() {             
    $.getJSON('https://api.covid19api.com/summary',
    function(data){
    var countries_list = data.Countries;
    //console.log(countries_list);
      $(countries_list).each(function(i, country_dtls){
      $('#totalbody').append($("<tr>")
      .append($("<td>").append(country_dtls.country))
      .append($("<td>").append(country_dtls.TotalConfirmed))
      .append($("<td>").append(country_dtls.TotalDeaths))
      .append($("<td>").append(country_dtls.TotalRecovered)));
      });
     })
    }

最后 statusUpdate.html

    <table class="table table-striped table-bordered table-sm" cellspacing="0" width=80%>
      <thead>
       <tr>
         <th>Country</th>
         <th>TotalConfirmed</th>
         <th>TotalDeaths</th>
         <th>TotalRecovered</th>
       </tr>
      </thead> 
      <tbody id="totalbody">                                                                                                                        
      </tbody>
    </table>

我该怎么办？我必须承认我在这里迷路了。

Answer 1

我认为您不太了解AJAX的工作原理。您正在处理对“ covidLink”的单击。这会同时两件事。

1. 它告诉浏览器导航离开当前页面并转到statusUpdate.html。

2. 它运行requestVirusData()函数。这将从API获取数据，并将其返回到页面。

但是问题是：API调用将数据返回到从中调用脚本的页面-即，它将数据返回到pan.html。您刚刚告诉浏览器离开了该页面。另外，pan.html不包含用于将返回的数据放入其中的表。

这里的逻辑解决方案是改为从statusUpdate.html链接到fetchdata.js，并略微调整代码，使其在加载该页面时运行，而不是单击按钮即可运行：

$(document).ready(function () {
  console.log("page loaded...");
  requestVirusData();
});

Answer 2

按照ADyson的建议，我做了代码更改，现在无法显示带有数据的表。 这是我的代码更改：

statusUpdate.html

                                           <tbody id="tbody">
                                                    <script>
                                                            var datatable;
                                                            fetch('https://api.covid19api.com/summary')
                                                            .then(function (response) {
                                                                return response.json();
                                                            })
                                                            .then(function (data) {
                                                                appendData(data);
                                                            })
                                                            .catch(function (err) {
                                                                console.log('error: ' + err);
                                                            });

                                                            function appendData(data) {
                                                                var countries_list = data.Countries;
                                                                var tbody = document.getElementById("tbody");

                                                                // clear the table for updating
                                                                $('table tbody').empty();
    
                                                                // hide the table for hidden initialize
                                                                $('table').hide();
    

                                                                // loop over every country
                                                                for (var i in countries_list) {
                                                                    var country_dtls = countries_list[i];
                                                                // replace -1 with unknown
                                                                    for (var o in country_dtls) {
                                                                        if (country_dtls[o] == -1) country_dtls[o] = 'Unknown';
                                                                    }
                                                                    $('table tbody').append(`
                                                                        <tr>
                                                                        <td>${country_dtls.Country}</td>
                                                                        <td>${country_dtls.TotalConfirmed}</td>
                                                                        <td>${country_dtls.TotalDeaths}</td>
                                                                        <td>${country_dtls.TotalRecovered}</td>
                                                                        </tr>`);
                                                            }
                                                            
                                                        }

                                                    // }
                                                    </script>
                                                </tbody>

pan.html

<a class="covid" href="statusUpdate.html">Covid-19</a>

现在，我显然不需要fetchdata.js。 希望这可以帮助像我一样陷入困境的人：）