用Ajax实现分页和删除(一)

来源：互联网发布：淘宝网投诉卖家电话编辑：程序博客网时间：2024/05/21 06:15

页面：

<div>

<h1>

员工界面

</h1>

<thead>

<tr>

<th>

序号

</th>

<th>

姓名

</th>

<th>

性别

</th>

<th>

年龄

</th>

<th>

出生日期

</th>

<th>

薪资

</th>

<th>

</th>

</tr>

</thead>

</table>

</div>

要想实现分页，首先要把数据库中的数据全部都遍历出来

其实遍历出数据库的内容是比较简单的

比较重要的一点是要记得Ajax的几个步骤：

第一步：创建xmlHttpRequest对象

为以后调用方便，可以将创建方式单独写成一个函数。如下所示

Function createXMLHttpRequest(){

VarxmlHttp;

Try{

//非IE浏览器

xmlHttp=newXMLHttpRequest();

}catch(e){

//IE浏览器

Try{

xmlHttp=new ActiveXObject(“MSXML2.XMLHTTP”);//第二个版本

}catch(ex){

xmlHttp=newActiveXObject(“Microsoft.XMLHTTP”);//第一个版本

}

//记得要返回一下啊

Return xmlHttp;

}

写完方法之后，在使用时就可以直接调用了

Var xmlHttp=createXMLHttpRequest();

通过按钮的id来获得按钮,当然为了简单，不用总写那么长一句话我们同样可以写一个方法：

Function getNode(id){

Returndocument.getElementById(id);

}

var btnNode=getNode(“btn”);

//当点击按钮时触发事件

btnNode.onclick=function(){

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//获取xmlDocument

VarxmlDoc=xmlHttp.responseXML;

//获取xml文件中的emp的所有元素节点

Varemps=xmlDoc.getElementsByTagName(“emp”);

//获取emp节点里面的所有孩子节点

For(vari=0;i<emps.length;i++){

//得到一个具体的emp

VarempNode=emps[i];

//为emp创建一行

Vartr=document.createElement(“tr”);

//创建序号的td

Vartd1=document.createElement(“td”);

Td1.appendChild(document.createTextNode(emps[i].getAttribute(“id”)));

Tr.appendChild(td1);

VarelementNodes=empNode.childNodes;//name,sex,age

For(varj=0;j<element.length;j++){

//节点是否是元素节点

If(elementNodes[j].nodeType==1){

Vartd2=document.createElement(“td”);

Td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));

Tr.appendChild(td2);

}

empsHtmlNode.appendChild(tr);

}

//第二步：规定请求参数

xmlHttp.open(“GET”,”./servlet/EmployeeServlet”,true);

//第三步：发送请求

xmlHttp.send(null);

}

注意：在每次查询之后显示的时候，如果直接不停按按钮，会一直重复数据库中的内容，为避免这种情况的发生，在触发按钮事件之后要先清空。下面是一个清空的方法：

Function clearNodes(node){

Varlens=node.childNodes.length;

For(vari=0;i<lens;i++){

Node.removeChild(node.childNodes[0]);

}

与之对应的servlet中的方法：

public void doGet(HttpServletRequestrequest, HttpServletResponse response)

throwsServletException, IOException {

//获取查询的数据

/*List<Employee>emps = employeeService.findAll();*/

Pagepage = new Page("Employee", 1);

List<Employee>emps = page.getDatas();

response.setContentType("text/xml;charset=UTF-8");

PrintWriterout = response.getWriter();

out.println("<?xmlversion=\"1.0\" encoding=\"UTF-8\"?>");

out.println("<emps>");

for(inti=0;i<emps.size();i++){

Employeeemp = emps.get(i);

out.println("<empid='"+emp.getId()+"'>");

out.println("<name>"+emp.getHrName()+"</name>");

out.println("<sex>"+emp.getHrSex()+"</sex>");

out.println("<age>"+emp.getHrAge()+"</age>");

out.println("<birth>"+emp.getHrBirth()+"</birth>");

out.println("<salary>"+emp.getHrSalary()+"</salary>");

out.println("</emp>");

}

out.println("</emps>");

out.println();

out.flush();

out.close();

}

上面的Page是一个自己定义的类，里面包含的是分页的相关内容

// 封装分页信息

privateInteger nowPage;// 当前页

privateInteger countPage;// 总页数

privatestatic final Integer PAGESIZE = 3;// 每页显示的记录数

privateInteger countSize;// 总记录数

privateList datas;// 封装当前页记录

publicPage() {

super();

//TODO Auto-generated constructor stub

}

publicPage(String className,int nowpage) {

this.nowPage=nowpage;

//查询总记录

this.setCountSize(HiberUtil.getSession().createQuery(

"from" + className).list().size());

//总页数

this.countPage= this.countSize % this.PAGESIZE == 0 ? this.countSize

/this.PAGESIZE : this.countSize / this.PAGESIZE + 1;

//获取当前的信息并赋值给datas

this.setDatas(HiberUtil.getSession().createQuery("from" + className)

.setFirstResult((this.nowPage- 1) * this.PAGESIZE).setMaxResults(

this.PAGESIZE).list());

}

publicInteger getNowPage() {

returnnowPage;

}

publicvoid setNowPage(Integer nowPage) {

this.nowPage= nowPage;

}

publicInteger getCountPage() {

returncountPage;

}

publicvoid setCountPage(Integer countPage) {

this.countPage= countPage;

}

publicInteger getCountSize() {

returncountSize;

}

publicvoid setCountSize(Integer countSize) {

this.countSize= countSize;

}

publicList getDatas() {

returndatas;

}

publicvoid setDatas(List datas) {

this.datas= datas;

}