Question

我是javascript的新手。

我需要从2个不同的JSON请求中获取AJAX响应，并创建一个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 =＆＃34; display：inline-block;＆＃34;

和第二个表

style =＆＃34; float：left;＆＃34;＆gt;

   <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
  }

 });


}

它只是如何为您的理解而努力，可以制定更加动态的解决方案

两个不同的表与2个不同的AJAX JSON响应数据

1 个答案: