Springboot9_表單太重

在編寫員工列表頁面的時候，在每一個員工信息後面都需要添加一個編輯按鈕和一個刪除按鈕
使用以下方式書寫

<td>
    <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">編輯</a>
    <form th:action="@{/emp/}+${emp.id}" method="post">
    	<input type="hidden" name="_method" value="delete"/>
    	<button type="submit" class="btn btn-sm btn-danger">刪除</button>
    </form>
</td>

就會出現如下的情況，顯得很難看

那怎麼辦呢，我們把form表單放到表格的外面，用js來處理請求
將上述代碼改爲如下所示，注意button的class添加了一個deleteBtn的樣式，在js中指定該樣式會觸發刪除請求

<td>
    <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">編輯</a>
    <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除
    </button>
</td>

在頁面的其他地方添加一個隱藏的表單

表單代碼如下

 <form id="deleteEmpForm" method="post">
     <input type="hidden" name="_method" value="delete"/>
 </form>

然後在js中處理請求

<script>
    $(".deleteBtn").click(function () {
        //刪除當前員工的
        $("#deleteEmpForm").attr("action", $(this).attr("del_uri")).submit();
        return false;
    });
</script>

以上操作完成後，頁面就可以正常顯示