如何动态的添加下拉菜单跟复选框及submit与button的使用差别
前言
需求:需要单独给每个店铺定制商品主类别跟副类别,然后再商品发布的时候,需要选择属于主类别跟副类别的选项。
直接上图看需求吧!
看完图,应该很清晰了,主类别采用下拉菜单,副类别采用的是复选框,通过在对应店铺内定制主副类别,可以在商品发布时,选择商品属于的类别。
正文
首先我们来看一下数据库是怎么设置的吧,字段shop_id,category_name,flag分别表示类别名,店铺Id,flag=1是主类别,0是副类别。对应的输入了几组数组来配合我们的实验。
接下来我们来看看主类别的图背后的jsp页面是怎么设计的:
整张图,我们可以分两个部分,来看:
(1)点击进来以后,需要先查询数据库,把对应店铺的商品主类别找出来,然后把数据扔给Category,然后由它依次显示出来。
(2)我们可以在图中横线处填写我们需要的主类别名称,然后点击确认提交,重新刷新页面,显示提交完以后的数据,其实,这里又有两个操作,一个是操作时插入数据,另一个是查询,然后才能显示更新以后的页面。
我们先来看看第一个步骤,查询商品类别,我们直接在上图点击商品类别编辑:
可以看到,我们把shop_id参数一并提交给servlet/CateListServlet进行处理了,那么继续我们看到servlet具体做了什么?
上图里,我们具体做的就是先定义一个list,然后查询类别,通过shop_id和flag两个参数,先查询的是主类别,因此flag=1,然后我们request.getSession().setAttribute("Category", list_1); 把数据赋给Category,然后再由jsp页面的 <c:forEach items="${Category }" var="c" varStatus="status">来分别显示数据,其中引入<c:forEach></c:forEach>要注意一定要引入标签<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>,还要引入两个架包,具体看这个博客地址http://blog.****.net/u011958281/article/details/74216015,里面有详细的导包过程,不导入,会提醒,但是不报错,可是你的结果就是出不来,很苦恼。这一点一定要注意!!
接下来我们看第二个步骤,怎么动态添加类别:
添加:<input type="text" name="cate_1" class="bg" />
<input type="submit" value="确定" >
<form method="post"
action="${pageContext.request.contextPath}/servlet/AddCategoryServlet?flag=1">
可以看到,点击提交submit以后,会把执行${pageContext.request.contextPath}/servlet/AddCategoryServlet?flag=1,并且把flag=1参数传给后台,告诉它是做主类添加。
这里有一个小细节, <input type="submit" value="确定" > type=“submit”,它会默认执行form 里面的action里面的方法,并且把form内的数据全部提交给后台,后台就可以接受到了,这里提交的是<input type="text" name="cate_1" class="bg" />,参数名是name="cate_1",还有一个是通过地址传过去的flag=1,
后台接收:
String category_name = request.getParameter("cate_1");
int flag =Integer.parseInt(request.getParameter("flag")) ;
这样就可以接收到前台的数据参数,因为都是默认String类型,所以需要转一下Int类型。
但是有时候我们需要点击以后不是执行submit提交,而是执行另外的任务,那么我们type=“button”,而改成这个以后,再次点击,发现后台无论如何都得不到前台的category_name参数,flag可以,因为通过地址传过去的,与form无关,button是无法提交form内的数据的,因此,有时候,大家一定要注意这两个的用法。
大家可以看到,如果我要删除一条记录怎么办,也是在form内的,如果我们写type=“button”,那么对不起,无论如何,也执行不了删除的功能,只会默认执行form内的action方法,那么我们要怎么做呢,改成button,这样才能执行我们的删除servlet,在这里我没有这么做,我是通过<a></a>超链接来做的:
<td align="center" style="HEIGHT: 22px" width="7%"><a
href="${pageContext.request.contextPath}/servlet/DeleteCatesServlet?shop_id=${shop.id }&name=${c.category_name}">
<img
src="${pageContext.request.contextPath}/admin/images/i_edit.gif"
border="0" style="CURSOR: hand">
</a></td>
我通过传店铺id跟类别名来删除类别:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
ShopService ss = new ShopServiceImpl();
String name = request.getParameter("name");
int shop_id = Integer.parseInt(request.getParameter("shop_id"));
int i = ss.deleteCate(shop_id, name);
if(i==1){
System.out.println("删除了"+name+"商品类别信息!");
request.getRequestDispatcher("/servlet/CateListServlet").forward(request, response);
}
}
具体的删除操作大家应该都熟悉,主要就是在一个form内的不同<input type="">到底是submit还是button,这两个的区别,
最后我跳转到request.getRequestDispatcher("/servlet/CateListServlet").forward(request, response);这个servlet执行查询类别,最后显示出来了。
副类别跟主类别一样的思想,大家参考主类别就可以了。
最后,就是我们如何动态的显示下拉菜单跟复选框!
再看一遍效果图:
下面我就直接上代码了,因为还是一个forEach,步骤跟之前的一样:
<tr>
<td align="center" bgColor="#f5fafe" class="ta_01">商品主类别:</td>
<td bgColor="#ffffff"><select name = "CategorySelect" >
<option value="" selected="selected">--------------选择--------------</option>
<c:forEach items = "${Category_1 }" var = "c">
<option value="${c.category_name }">${c.category_name }</option>
</c:forEach>
</select>
<td align="center" bgColor="#f5fafe" class="ta_01">商品副类别:</td>
<td bgColor="#ffffff">
<c:forEach items = "${Category_0}" var = "ca" varStatus="vs">
<input type = "checkbox" value ="${ca.category_name }" name="name">${ca.category_name }
<c:if test="${(vs.index+1)%8 == 0}">
<br />
</c:if>
</c:forEach>
</tr>
这就是关键的两个显示的代码,大家可以直接复制, <c:forEach items = "${Category_1 }" var = "c">, <c:forEach items = "${Category_0}" var = "ca" varStatus="vs">这两处的${Category_1 }${Category_0},都是通过后台查询,然后分别把查询的List数据赋值一下就可以了,到此我们局可以看到,这个过程结果就出现了,做了整整两天,前期也纠结了好久怎么实现,对了还有一个小问题也是里面出来的,但是跟题无关,但是一旦发生很难找到,也是关于这个赋值的问题,不报错,但是后台就是得不到值。
看图name="capacity "有没有注意“ ”里面是空了一格,因此在后台你用request.getParameter("capacity");会发现无论如何你得不到这个参数的值,你也不会对这个小小的空格产生疑惑吧,就是这样的一个空格,导致你可能大白天都出不来结果!我也遇到了,因为之前也遇到过,所以试了几次就看出来了。大家一定要自己注意!