ajax實現表格資料刪除操作
阿新 • • 發佈:2019-01-26
假裝是標題
在平時寫crud中的刪除操作時,作為新手,我一般比較常用的是用 <a href="delete?id=${a.articleId}">刪除</a>這種方式,現在的話我要介紹另一種方式--使用ajax實現刪除操作。
步驟
1.前臺jsp介面
<c:forEach items="${articles}" var="a"> <td> <a href="editArticle?articleId=${a.articleId} class="layui-btn layui-btn-mini">編輯</a> <button id="deleteButton" class="layui-btn layui-btn-danger layui-btn-mini" onclick="deleteArticle('${a.articleId}')">刪除</button> </td> </c:forEach>
2.js程式碼
3.後端controller程式碼<script> function deleteArticle(id){ var flag = confirm("你確定要刪除嗎?"); if (flag){ alert(id); $.ajax({ url:"deleteArticle", type:"post", async:false, data:{articleId:id}, dataType: 'json', success:function(data){ if(data.stateCode.trim() == "1" ) { window.location.reload(); } } }) } } </script>
以上三步,就可以通過我們的ajax實現刪除操作啦,相比於傳統的方法,使用ajax的話可以使刪除資料後仍然停留在當前頁,避免了重新跳轉回到頁面第一頁。@RequestMapping("deleteArticle") public @ResponseBody Object delete(Integer articleId){ System.out.println("articleId:"+articleId); //除錯的時候用的 Article article = articleService.selectById(articleId); HashMap<String, String> hash = new HashMap<String, String>(); if (article != null){ hash.put("stateCode", "1"); articleService.deleteArticle(article); }else{ hash.put("stateCode", "0"); } return hash; }