前端后台分开之删除和修改三级列表

本文详细介绍了如何在前端实现三级列表的删除和修改功能,包括点击删除按钮后的url接口调用、Servlet中的处理方法、Ajax交互、接口文档编写以及修改过程中的各个步骤,如获取分类信息、更新数据等。
摘要由CSDN通过智能技术生成

删除

1.list页面中点击删除后调用url接口

1.1生成列表中的删除按钮

str+=" <a href='javascript:fbtn("+n.kid+",\""+n.kindName+"\")'>删除</a>|";

1.2按钮点击事件,携带id发送到url接口

	function fbtn(id,name){
   
			
		if( !confirm("确定要真的删除【"+name+"】 吗?")) return;
		
		$.ajax({
   
			"url": "<%=path%>/svlt/pingtai/kindthdbbb/deleteThird",
			"type":"get",
			"data":{
   "xxx":id},
			"success":function(dt){
   
				//alert(dt);
				dt = eval( "("+dt+")" );
				if( dt.success == 0 ){
   
					location.href="<%=path%>/pingtai/kind/kindThirdB_list.jsp";
				}else{
   
					alert('此项操作失败.请联系');
				}
			}
		});
		
	}//fbtn()
1.3Servlet中url接口路径

@WebServlet("/svlt/pingtai/kindthdbbb/*")

1.4执行delete方法


	/**
	 * 测试url: 	/svlt/pingtai/kindthdbbb/deleteThird
	 * 删除一个三级分类
	 * @param	参数xxx
	 * @return
	 * 			正确:{"success":0}
	 * 			
	 * 			错误:{"success":-1} 
	 */
	private void delete(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
   
		
		String p0 = req.getParameter("xxx");
		System.out.println(this.getClass().getName()+"日志1..\t:要删除的id  "+p0);
		
		System.out.println(this.getClass().getName()+"日志2...使用Manager删除");
	
		StringBuffer bf = new StringBuffer();
		bf.append("{");	
		try{
   
			thdMng.deleteThird( Integer.parseInt(p0) );
			bf.append("		'success':0,");	
		}catch (Exception e) {
   
			e.printStackTrace();
			bf.append("		'success':-1,");
		}
		bf.append("}");
		
		System.out.println(this.getClass().getName()+"日志3...返回json");
		resp.getWriter().print(  bf.toString() );//加入EncodingFilter少写两句代码
		
	}//delete()
1.5在浏览器里测试接口

##001.PNG

1.6编写接口文档(简单版)

002.PNG

1.7成功后在ajax中接收json并跳转到list页面

	//删除
	function fbtn(id,name){
   
	
		if( !confirm("确定要真的删除【"+name+"】 吗?")) return;
		
		$.ajax({
   
			"url": "<%=path%>/svlt/pingtai/kindthdbbb/deleteThird",
			"type":"get",
			"data":{
   "xxx":id},
			"success":function(dt){
   
				//alert(dt);
				dt = eval( "("+dt+")" );
				if( dt.success == 0 ){
   
					location.href="<%=path%>/pingtai/kind/kindThirdB_list.jsp";
				}else{
   
					alert('此项操作失败.请联系');
				}
			}
		});
		
	}//fbtn()

2.修改三级分类

2.1在list的修改链接点击事件

str+=" <a href='javascript:fupd("+n.kid+",\""+n.kindName+"\")'>修改</a>";
触发的方法有两个参数id和name


	//修改
	function fupd(id,name){
		if( !confirm("确定要修改【"+name+"】 吗?")) return;
		location.href="<%=path %>/pingtai/kind/kindThirdB_upd.jsp?xxx="+id;
	}
2.2 upd.jsp使用ajax发送请求,返回所有的一级分类集合

	$(function(){
   
		//加载一级分类列表
		$.ajax({
   
			"url":"<%=path%>/svlt/pingtai/kindthdbbb/findFirst",
			"type":"get",
			"async":"false",
			"success":function(dt){
   
				alert(dt);
				var dt  = eval("("+dt+")");
				//alert(dt.success==0);
				if( dt.success==0){
   	//接收到json数据成功
					$.each(dt.data,function(i,n){
   
						var str = "<option value='"+n.kid+"'>"+n.kindName+"</option>";
						$("#upid").append(str);						
					})//each
				}
			}
		});
2.3 找到对应的getFirst方法,注意接口文档的书写

此处getUpid为int类型,String类型需要加上’’
注意测试接口是否能拿到值


	/**
	 * 测试url:	/svlt/pingtai/kindthdbbb/findFirst
	 * 
	 * 返回:	真确:{
	 * 				"success":0
	 * 				"data":[
	 * 					{"tid":"a01",'tname':'脱水蛋糕','timg':'aa.png','upid':'aa','upname':'蛋糕/甜点'},
	 * 					{"tid":"a02",'tname':'软蛋糕','timg':'a02.png','upid':'aa','upname':'蛋糕/甜点'},
	 * 					{"tid":"a03",'tname':'硬蛋糕','timg':'a03.png','upid':'aa','upname':'蛋糕/甜点'},
	 * 				]
	 * 			}
	 * 			
	 * 		错误:{"success":-1}
	 */
	private void getFirst(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
   
		System.out.println(this.getServletName()+"日志1...查询一级分类集合");
		List<Kind> klist = fmng.findKindfirst();
		
		System.out.println(this.getServletName()+"日志2...转成json格式");
		StringBuffer bf = new StringBuffer();
		bf.append("{"
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值