javascript - 两个不同的表，具有 2 个不同的 AJAX JSON 响应数据

Question

我是javascript新手。

我需要从 2 个不同的 AJAX 请求获取 JSON 响应并创建 2 个不同的表。

我已经通过 1 个 JSON 响应和 1 个表实现了这一目标。

HTML:

<div style="width:700px;padding:20px;S">
                    <table id="host_table" class="table">
                        <tr>
                            <th>Server Name</th>
                            <th>Availability %</th>
                        </tr>
                    </table>
</div>

JavaScript:

$(function() {

    // kick off with fetchdata
     fetchData();
//   fetchServiceData();
});
function make_base_auth(user, password) {
            var tok = user + ':' + password;
            var hash = btoa(tok);
            return 'Basic ' + hash;
}

function fetchData() {
  var time = new Date();
  var end =  Math.floor((new Date).getTime()/1000);
  //var end = ~~(Date.now() /1000) ;
  var start = Math.floor(time.setDate(time.getDate() - 1)/1000);
  Availreport = "http://xx.xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=hostgroups&hostgroup=ALM&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start + "&endtime=" + end;

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization',
                        make_base_auth("nagiosadmin", "nagiosadmin"));
                },

 dataType: 'json',     //data format
 //async: false,
 //success: onOutboundReceived      //on receive of reply
 timeout: 0,
 success: availshow 

 });

  function availshow(series) {

  // 1. remove all existing rows
    $("tr:has(td)").remove();

    $.each(series.data.hostgroup.hosts, function (index, test) {  
  $('<tr>').append(
            $('<td>').text(test.name),
            $('<td>').text(parseInt(((test.time_up - test.time_down)/test.time_up)*100)),
        ).appendTo('#host_table');          
    });

    $('#host_table tr').each(function() {
  var $td = $(this).find('td:eq(1)');
  var value = $td.text();
  if (parseInt(value) < 100) {
    $td.css('background-color', 'red');
        }
    });

}

这非常适合创建 1 个表。

但是我无法继续为 2 个 JSON 响应创建 2 个表。

我可以在 HTML 中创建 2 个表格。

但无法将 JSON 响应提供给特定表。

用于创建 2 个表的 HTML :

            <table id="host_table" class="inlinetable" style="display: inline-block;">
                <tr>
                    <th>Server Name</th>
                    <th>Availability %</th>
                </tr>
            </table>

            <table id="service_table" class="inlinetable" style="display: inline-block;">
                <tr>
                    <th>Service Name</th>
                    <th>Availability %</th>
                </tr>
            </table>

如何完成我的任务？

Answer 1

像这样并排放置表格 这是另一个问题但是 用于第一个表

style="display: inline-block;"

第二个表

style="float: left;">

   <table id="host_table" class="inlinetable" style="display: inline-block;">
        <thead>
          <tr>
            <th>Server Name</th>
            <th>Availability %</th>
          </tr>
        </thead>
        <tbody></tbody>
    </table>

    <table id="service_table" class="inlinetable" style="float: left;">
        <thead>
          <tr>
            <th>Service Name</th>
            <th>Availability %</th>
          </tr>
        </thead>
        <tbody></tbody>
    </table>

JS

$(function() {

// kick off with fetchdata
//   service_table();
service_table();
//   host table();
fetchData2();

});


function service_table() {

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization',
          make_base_auth("nagiosadmin", "nagiosadmin"));
     },
 dataType: 'json',
 timeout: 0,
 success:function(series) {

   $('#service_table tbody').empty();
     // your row loop code
  }

 });
function service_table() {

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization',
          make_base_auth("nagiosadmin", "nagiosadmin"));
     },
 dataType: 'json',
 timeout: 0,
 success:function(series) {

   $('#host_table tbody').empty();
       // your row loop code
  }

 });


}

这就是它如何为您的理解工作，可以制定更动态的解决方案