要求:
点击删除按钮,先出现友好弹框
确定删除后,弹出删除成功弹框
异步ajax不做整个页面刷新,只做表格刷新
所以弹框和页面无关
用json方式从服务器端返回字符串
1.页面开发
<button type="button" class="btn btn-warning" id="mydel" onclick="del(${p.pId},${info.pageNum})">删除 </button>
//单个删除 function del(pid,page) { //弹框提示 if (confirm("您确定删除吗?")) { //发出ajax的请求,进行删除操作 //取出查询条件 var pname = $("#pname").val(); var typeid = $("#typeid").val(); var lprice = $("#lprice").val(); var hprice = $("#hprice").val(); $.ajax({ url: "${pageContext.request.contextPath}/prod/delete.action", data: {"pid": pid,"page": page,"pname":pname,"typeid":typeid,"lprice":lprice,"hprice":hprice}, type: "post", dataType: "text", success: function (msg) { alert(msg); $("#table").load("http://localhost:8080/admin/product.jsp #table");
//删除后直接加载table,并不是直接加载jsp页面,request添加的属性显示不了 } }); } }
2.service开发
@Override public int delete(int pid) { return productInfoMapper.deleteByPrimaryKey(pid); }
3.controller开发
@RequestMapping("/delete") public String delete(int pid, HttpServletRequest request) { int num = -1; try { num = productInfoService.delete(pid); } catch (Exception e) { e.printStackTrace(); } if (num > 0) { request.setAttribute("msg", "删除成功!"); } else { request.setAttribute("msg", "删除失败!"); }
//删除结束后跳到分页显示,重定向跳
return "forward:/prod/deleteAjaxSplit.action";
}
为了显示分页,其实没太懂
@ResponseBody @RequestMapping(value = "/deleteAjaxSplit", produces = "text/html;charset=UTF-8")
//接收的数据不是json所以要用peoduces这个属性 public Object deleteAjaxSplit(HttpServletRequest request) { //取得第1页的数据 PageInfo info =productInfoService.splitPage(1, PAGE_SIZE);
request.getSession().setAttribute("info",info);
return request.getAttribute("msg");
}