如何用ajax和spring填充模態窗體MVC

Question

我有一個jsp，我可以在瀏覽器的表格中看到保存在數據庫中的結果，並帶有編輯，刪除每一行的選項。我希望能夠點擊編輯鏈接，使用Spring MVC和Hibernate從數據庫中獲取特定客戶的數據，並以編輯模式顯示，以便用戶可以查看數據並知道要編輯哪些數據。

以下是代碼片段，行

編輯客戶詳細信息

是編輯客戶的鏈接。我不知道從哪裏去，想要調用ajax函數，以及ajax函數的外觀如何？以及ajax如何調用模態？

我看到了這個解決方案（Spring MVC Populate Modal Form），但它並沒有顯示如何調用模態來填充ajax的值。或者還有其他方法嗎？任何人都可以請幫忙，謝謝。

<c:forEach var="customer" items="${customers}" varStatus="status"> 
             <tr> 
              <td><c:out value="${status.count}" /></td> 
              <td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td> 
              <td>${customer.contactName}</td> 

              <td>${customer.street}</td> 
              <td>${customer.state}</td> 
              <td>${customer.zipCode}</td> 
              <td>${customer.country}</td> 
              <td>${customer.email}</td> 

              <!--below line of code till end of tag </td> not showing on browser --> 

              <td> 
               <div class="btn-group"> 
                <button type="button" 
                 class="btn btn-default dropdown-toggle" 
                 data-toggle="dropdown"> 
                 Actions <span class="caret"></span> 
                </button> 
                <ul class="dropdown-menu" role="menu"> 
                 <li><a data-toggle="modal" 
         data-target="#editCustomerModal">Edit Customer Detail</a></li> 

                 <li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li> 
                </ul> 
               </div> 
              </td> 

             </tr> 

             <!--Delete Customer Modal --> 

    <div id="deleteCustomerModal_${customer.id}" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Confirm Delete</h4> 
      </div> 

      <div class="modal-body"> 
       <p>Are you sure you want to delete this Customer? </p> 
      </div> 
      <div class="modal-footer"> 

       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <a href="${pageContext.request.contextPath}/delete?id=${customer.id}" title="Delete"><i class="fa fa-trash-o"></i>Delete</a> 
      </div> 
     </div> 
    </div> 
</div> 
                      </c:forEach> 

我的模態編輯：

<!--Edit Customer Modal --> 

    <div id="editCustomerModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        Create New Customer 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
       </div> 
       <div class="modal-body"> 



        <table class="form-table"> 
         <tbody> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="pool-name">Customer Name:</label></td> 
           <td><input type="text" id="customerName" title="Company Name" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Contact Name:</label></td> 
           <td><input type="text" id="contactName" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="description">Street:</label></td> 
           <td><input type="text" id="street" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="description">State:</label></td> 
           <td><input type="text" id="state" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Zip-Code:</label></td> 
           <td><input type="text" id="zipCode" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Country:</label></td> 
           <td><input type="text" id="country" path="#" 
            class="form-control" /></td> 
          </tr> 

          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Email:</label></td> 
           <td><input type="text" id="email" path="#" 
            class="form-control" /></td> 
          </tr> 

         </tbody> 
        </table> 


       </div> 
       <div class="modal-footer"> 
        <div> 
         <input type="submit" id="createNewCustomer" value="Save" 
          class="btn btn-default" onClick="alert('To be Implemented');" /> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

試試這個，把隱藏的價值，爲客戶ID在你的編輯模式，

<input type="hidden" id="customerId" path="customerId" class="form-control" /> 

更改您的提交按鈕進入普通按鈕保存客戶。

<div class="modal-footer"> 
    <div> 
     <button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

你可以用JS玩，特別是到了ajax，

<script type="text/javascript"> 

    function ajaxCall(customerId) { 
     $.ajax({ 
      type: "POST", 
      url: "/clause/getUpdate?customerId="+customerId , 
      success: function(result) { 
       //populate customer list page again.. 
      } 
      } 
    }); 

    $('.updateCustomer').on('click', '.accountsEmployees', function() { 
     customerId=$("#customerId").val(); 
     ajaxCall(customerId); 

    } 
</script>