（jsp八）專案例項功能實現補充：ajax及選中所有項
說明：在新增時還需要注意一點，在新增時需要將文字框設定為必填項並對商品名稱進行驗證，如果已經存在的話則在游標離開文字框及onblur事件發生時進行提示名稱存在並阻止提交。此處就需要用ajax技術——非同步的javascript and xml，有點是頁面區域性重新整理，使用者體驗度好，在後臺對名稱進行驗證時，使用者仍然可以繼續對其他文字框進行操作。使用該技術時，需要在頭部對外部檔案進行引入，在表單中onblur事件返回一個check_pname函式，在外部檔案中定義check_pname函式，再通過外部檔案轉到ProductServlet進行驗證，驗證完畢後再將驗證結果通過輸出流返回至外部檔案，最後由外部檔案將結果傳至
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
</head>
<body>
<form action="ProductServlet?flag=Add" method="post" onsubmit="return check_submit()">
商品名稱：<input id="pname" name="pname" type="text" required="required" onblur
型別名稱：
<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;
}
效果圖：
選中所有項
