如何用ajax和spring MVC填充模态表单

时间:2017-09-13 22:26:07

标签: javascript jquery ajax spring hibernate

我有一个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>
    

    1 个答案:

    答案 0 :(得分:0)

    尝试此操作,在编辑模型中为客户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>