动态插入put请求的表单项，可以这样节省资源

优秀的代码

无论是前段还是后端，程序员的无不希望能写出更优秀的代码。何为优秀的代码，大家心里都有着自己的标准，但大体上都是基本的结构清晰，语句优美，层次分明，可维护，可扩展，性能更优等。
今天在学习的过程中遇到一个 很实际的问题。

问题描述

给页面中动态加入一个按钮，且按钮需要用到put、delete类似的非默认方式的请求时，一般我们是要让其包裹在一个form表单当中，给form的method设置成post

<form method="post">
	<input type="hidden" type="_method" value="delete">
	<button type="submit">删除</button>
</form>

再过前段的一些配置（hiddenmethod）来实现put、delete等形式的请求，若是一个两个按钮还可以忍受，若是动态插入的很多，像下图要遍历加载的，就会徒增很多无用的消耗。

解决方案

思路: 将form单独抽取出来，将需要发送特殊请求的按钮加上JS事件，在事件中选择到form表单，然后调用该form的submit方法。(这里只是将原来项目中的代码截取了一部分，以供参考，无法直接运行的)

    <tr th:each="emp:${emps}">
        <td th:text="${emp.id}"></td>
        <td>[[${emp.lastName}]]</td>
        <td th:text="${emp.email}"></td>
        <td>
            <a class="btn btn-sm btn-primary" >编辑</a>
            <!--被遍历的删除按钮-->
            <button class="btn btn-sm btn-danger deleteBtn">删除</button>
        </td>
    </tr>
    <!--抽取出来的form-->
    <form id="deleteEmpForm"  method="post">
        <input type="hidden" name="_method" value="delete"/>
    </form>
    <script>
        $(".deleteBtn").click(function(){
            //让button以delete方式提交请求
            $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
            return false;
        });
    </script>