javascript - 如何使用 AJAX GET 处理表单输入

Question

这是我第一次尝试使用 HTML 和 javascript 创建页面。

我创建了一个带有 2 个输入(表单和日期)的表单并提交按钮。同一页面包含该表格。

<h1 style="text-align:center"><b style="color:#ccc">ALM Availability Report</b></h1> 
<form id="availform" method="get">
<label for="fromdate"> FROM DATE </label>
<input id="from" type="datetime-local" name="fromdate">
<label for="enddate"> TO DATE </label>
<input id="end" type="datetime-local" name="enddate">
<button name="submit_button" class="submit_button" id="submit_button">Submit</button>
</form>
<br>
<br>
<div id=almserv >
    <span  style="top:10%;">ALM Service Availability %</span><br><br><br>
    <span id=servnum style="top:20%;font-size:75pt;"></span>
</div>
<br>
<br>

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="./images/ajax-loader4.gif" alt="Loading"/>
</div>      

    <table id="service_table">
                    <thead>
                        <tr>
                            <th>Service Name</th>
                            <th>Service Desc</th>
                            <th>Time OK %</th>
                            <th>Time Warning %</th>
                            <th>Time Critical %</th>
                        </tr
                    </thead>
                    <tbody></tbody>
                    </table>

我正在使用 Nagios 进行服务器监控。我已生成 REST API url 来访问 Nagios 并获取可用性报告。我需要将起始日期和截止日期表单输入传递给 URL 的 AJAX 调用。

var end =  Form todate
var start = Form fromdate
servicereport = " http://xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=servicegroups&hostgroup=ALM&servicegroup=ALM+Tools&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start + "&endtime=" + end;
$.support.cors = true;

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

 dataType: 'json',     //data format
 success: servicedisplay
 });

成功后，表格将使用值进行更新。

如何实现这一目标？

Answer 1

我通过下面的 JavaScript 实现了这一点。

HTML:

<form name="NAME" id="avialform" action="">
  <fieldset>
     <legend style="color:white">AVAILABILITY REPORT</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>From Date :</label><input id="from" type="datetime-local" name="fromdate" /></td>
           <td><label>To Date :</label><input id="to" type="datetime-local" name="todate" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="getrepo">Submit</button>
</form>   

Javascript:

$(document).ready(function(){
$("#getrepo").click(function(){
var Fdate = document.getElementById("from").value;
var Tdate = document.getElementById("to").value;
//ajax call

});
});