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" οnclick="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的话可以使删除数据后仍然停留在当前页，避免了重新跳转回到页面第一页。