jquery如何通过ajax将数据库中的数据加载到表单中

问题描述

下面给出了我的 Java 和 HTML 形式的请求方法。我正在尝试通过选择 startDateendDate搜索表单数据,请帮忙。

@GetMapping(value = "/form",produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody Page<Form> getForm(@RequestBody SearchAllFormsPage searchForm,Pageable pageable) throws FormNotFoundException {
    return searchAllFormsService.findAllForms(
        searchForm.getStartDate(),searchForm.getEndDate(),searchForm.getEndTime(),searchForm.getCabinet(),PageRequest.of(0,5,Sort.by("formType"))
    );
}

@GetMapping
public String redirectToForm(ModelMap map) {
    map.addAttribute("title","Search Form");

    // List<Form> allForm = searchFormService.findAllForms();

    return "search/searchForm";
}

HTML

<Html>
   <body>
      <div id="body-wrapper">
         <div id="page-content-wrapper">
            <div class="container mt-3" id="main-content">
               <div class="form-group row">
                  <label for="" class="col-1 ">Type:</label>
                  <div class="col"> </div>
               </div>
            </div>
            <div class="form-group row m-3 mt-5">
               <label " class="col-1 col-form-label">Start Date:</label>
               <div class="col-5">
                  <input class="form-control" type="date" id="startDate" name="date">
               </div>
               <label for="time" class="col-1 col-form-label">Start Time:</label>
               <div class="col-5">
                  <input class="form-control" type="time" id="startTime" name="time">
               </div>
            </div>
            <div class="form-group row m-3">
               <label for="dateSelection" class="col-1 col-form-label">End Date:</label>
               <div class="col-5">
                  <input class="form-control" type="date" id="endDate" name="date">
               </div>
               <label for="time" class="col-1 col-form-label">End Time:</label>
               <div class="col-5">
                  <input class="form-control" type="time" id="endTime" name="time">
               </div>
            </div>
            <div class="form-group row m-3">
               <label class="col-1 col-form-lable">Room:</label>
               <div class="col-5">
                  <select class="form-control mr-1" id="room">
                     <option>Select a room </option>
                  </select>
               </div>
               <label class="col-1 col-form-lable">Cabinet:</label>
               <div class="col-5">
                  <select class="form-control ml-1" id="cabinet">
                     <option>Select a Cabinet </option>
                  </select>
               </div>
            </div>
            <div class="form-group row m-3">
               <label class="col-1 col-form-lable">Status:</label>
               <div class="col-5">
                  <select class="form-control mr-1" id="status">
                     <option>Select a Status </option>
                  </select>
               </div>
               <label class="col-1 col-form-lable">Result Type:</label>
               <div class="col-5">
                  <select class="form-control ml-1" id="resultType">
                     <option>Select a result Type </option>
                  </select>
               </div>
            </div>
            <div class="form-group row m-3">
               <label class="col-1 col-form-lable">User:</label>
               <div class="col-5">
                  <select class="form-control mr-1" id="user">
                     <option>Select a User </option>
                  </select>
               </div>
               <label class="col-1 col-form-lable">Barcode:</label>
               <div class="col-5">
                  <input class="form-control" type="text" id="barcode" name="barcode">
               </div>
            </div>
            <div class="text-right mr-4">
               <button class="btn btn-success " id="search">Search</button>
            </div>
            <div class="col-md-12 col-sm-12">
               <table class="table table-striped" id="tableData">
                  <thead>
                     <tr>
                        <th>Start Date</th>
                        <th>End Date</th>
                     </tr>
                  </thead>
                  <tbody>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
      </div>
      </div>
      <div th:replace="fragments/scripts :: scripts"></div>
      <div th:replace="fragments/cabinetSelection/selection :: cabinetSelectorScript"></div>
      <div th:replace="fragments/form/brothForm :: multiSelectVueJs"></div>
      <script type="text/javascript">
         $(document).ready(function () {
         
             // var classpath = /*[[ ${@environment.getProperty('server.servlet.context-path')}]]*/ ;
         
             var startDate = $('#startDate').val();
             // var endtDate = $('#endtDate').val();
         
             //$('#startDate').keyup(function(){
         
             $('#startDate').change(function () {
                 console.log(startDate);
         
         
                 $.ajax({
         
                     type: 'GET',url: 'env/search/form',contentType: 'application/json',data: {
                         startDate: startDate
                     },//dataType:'json',success: function (data) {
         
                         alert("this is data :" + data);
                         $("#tableData tbody").html(result);
                         //  $('#startDate').val();
                         // $('#endDate').val();
                     }
                 });
             })
         });
      </script>
   </body>
   enter code here
</html>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)