1. 程式人生 > >ajax實現表格資料刪除操作

ajax實現表格資料刪除操作

假裝是標題

    在平時寫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程式碼

<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>
3.後端controller程式碼
@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;	
	}
以上三步,就可以通過我們的ajax實現刪除操作啦,相比於傳統的方法,使用ajax的話可以使刪除資料後仍然停留在當前頁,避免了重新跳轉回到頁面第一頁。