Javascript 如何使用ajaxget处理表单输入

这是我第一次尝试用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>

成功后，将使用这些值更新该表

---

如何实现这一点？

我通过下面的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>   

---

因此，请添加一个提交处理程序，取消提交，然后进行调用？请共享代码片段。$availForm.submitfunctionevent{event.preventDefault；//此处的ajax代码}；非常确定您可以通过jquery搜索添加submit事件处理程序的示例……您没有搜索任何内容吗？要将日期传递给端点，请在ajax请求中设置数据参数。

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

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

});
});