用ajax实现分页 删除功能（三）

1.下面实现全选和反选功能

//实现全选 与反选的功能
$("chk").onclick = function() {
var inputs = document.getElementsByName("delchk");

//判断是否是选中的状态
if ($("chk").checked) {
//让所有input type=“checkbox”	并且 name=delchk的 变成选中状态
for ( var i = 0; i < inputs.length; i++) {
inputs[i].checked = "checked";
}

} else {
for ( var i = 0; i < inputs.length; i++) {
inputs[i].checked = null;
}
}

}

2.下面实现批量删除功能。

首先写两个函数来封装GET 和POST的请求，需要哪个在调用哪个就成。

//ajax get请求的封装
function get(url, params, fn) {
//第一步：创建XMLHttpRequest对象
var xmlHttp = createXMLHttp();
//第二步：相应的操作
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
fn(xmlHttp);
}
}
}
//第三步：打开请求  规定请求类型
xmlHttp.open("GET", url + "?" + params, true);
//第四步：发送请求
xmlHttp.send(null);
}
//ajax post请求的封装
function post(url, params, fn) {
//第一步：创建XMLHttpRequest对象
var xmlHttp = createXMLHttp();
//第二步：相应的操作
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
fn(xmlHttp);
}
}
}
//第三步：打开请求  规定请求类型
xmlHttp.open("POST", url, true);
//设置头信息
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//第四步：发送请求
xmlHttp.send(params);
}

在写一个DeleteEmployeeServlet 。在它的doGet()方法中的代码如下:

String ids = request.getParameter("ids");
System.out.println("-------------"+ids);
String id[] = ids.split(",");
EmployeeService eService = new EmployeeServiceImpl();
eService.delete(id);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("ok");
out.flush();
out.close();

在index.jsp中写实现批量删除的功能

//删除操作

$("delEmps").onclick = function() {
var inputs = document.getElementsByName("delchk");
var ids="";

for ( var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
ids += inputs[i].value + ",";
}
}

if(ids.length>0){
//ajax请求
get("./DeleteEmployeeServlet", "ids=" + ids + "&timeStamp="
+ new Date().getTime(), function(xmlHttp) {
var msg = xmlHttp.responseText;
if("ok".equals(msg)){
showEmps(1);
}
});
}else{
alert("请你选要删除的记录");
}

}

到此用ajax实现分页，删除的功能就全部实现了。