说明：在添加时还需要注意一点，在添加时需要将文本框设置为必填项并对商品名称进行验证，如果已经存在的话则在光标离开文本框及onblur事件发生时进行提示名称存在并阻止提交。此处就需要用ajax技术——异步的javascript and xml，有点是页面局部刷新，用户体验度好，在后台对名称进行验证时，用户仍然可以继续对其他文本框进行操作。使用该技术时，需要在头部对外部文件进行引入，在表单中onblur事件返回一个check_pname函数，在外部文件中定义check_pname函数，再通过外部文件转到ProductServlet进行验证，验证完毕后再将验证结果通过输出流返回至外部文件，最后由外部文件将结果传至jsp完成整个验证。外部文件为在js文件夹中创建的.js文件。
a.add_product.jsp代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/product.js"></script>
</head>
<body>
<form action="ProductServlet?flag=Add" method="post" onsubmit="return check_submit()">
商品名称：<input id="pname" name="pname" type="text" required="required" onblur="check_pname()" /><span style="color:red" id="pname_msg"></span><br/>
类型名称：
<select name="tid">
<c:forEach items="${list}" var="t">
<option value="${t.tid}">${t.tname}</option>
</c:forEach>
</select>
<br/>
商品价格：<input name="pprice" type="text" /><br/>
商品产地：<input name="paddress" type="text" /><br/>
商品描述：<input name="pdesc" type="text" /><br/>
<input type="submit" value="提交">
</form>
</body>
b.product.js代码
var flag;
function check_pname(){
//通过id获取panme的文本框的值
var pname=$("#pname").val();
//发送ajax请求
$.ajax({
//请求路径
url:'ProductServlet?flag=check_pname',
//携带的参数
data:{"pname":pname},
//提交的方式
type:"post",
//**表示服务端返回数据的类型，有：text：文本，xml，json，此处使用json
dataType:"json",
//成功时返回的数据，参数为参数名，可任意取
success:function(data){
if(data.msg=='ok'){
//不重复
$("#pname_msg").html("商品名称可以使用");
flag=true;
}else{
//重复
$("#pname_msg").html("商品名称已存在");
flag=false;
}
}
});
}
function check_submit(){
return flag;
}
c.ProductServlet代码：
if("check_pname".equals(flag)){
String pname=request.getParameter("pname");
Product product=dao1.findProductByPname(pname);
if(product==null){
//向js返回不重复的数据
out.println("{\"msg\":\"ok\"}");
}else{
//向js返回重复的数据
out.println("{\"msg\":\"error\"}");
}
}
效果图：
说明：通过表单name值获取该表单对象的值，将操作传输至ProductServlet进行操作后再进行返回。删除选中项即选中所有项操作代码如下所示，注意，在删除时如果删除项为其他项外键，则需要先将其他项删除，再删除该项。
a.product_list部分代码：
<th><input id="selAll" name="" type="checkbox" value="" onclick="selAll()"/></th>
<td><input name="ids" type="checkbox" value="${map.pid}" /></td>
b.product.js代码：
function delAll(){
//拿到选中的数据行
var $arr=$("[name='ids']:checked");
if($arr.length==0){
alert("至少选中一项");
}else{
var pids="";
//遍历得到的$arr数组
//i--正在遍历的下标
$arr.each(function(i){
//拿到正在遍历的数据的pid
pids+=$(this).val()+",";
});
//将最后一个逗号切割掉
pids=pids.substring(0,pids.length-1);
//返回数据
location.href='ProductServlet?flag=delAll&pids='+pids;
}
}
function selAll(){
var flag=$("#selAll").attr("checked");
//获取所有的数据行
var $arr=$("[name='ids']");
//遍历所有的数据行
$arr.each(function(i){
$(this).attr("checked",flag);
});
}
c.ProductServlet部分代码：
if("delete".equals(flag)){
int pid=Integer.parseInt(request.getParameter("pid"));
dao1.deleteProductByPid(pid);
flag=null;
}
if("delAll".equals(flag)){
String pids=request.getParameter("pids");
String[] ps=pids.split(",");
if(ps!=null){
for(String pid:ps){
dao1.deleteProductByPid(Integer.parseInt(pid));
}
}
flag=null;
}
效果图：
选中所有项
