一个简单的Ajax分页示例

　　前段时间做项目过程中,碰到一个问题．有一个页面需要做级联式的提交，例如：输入查询条件，提交表单A.得到表单B,然后在根据表单B中check的勾选项，提交后得到清单C,在同一页面显示，问题是：在表单B提交之后，或者点击清单C分页查询时返回的页面都需要保留表单B中的状态，这里的处理的确会让人很头痛，于是最后决定在表单B的提交中使用Ajax，这样一来便无须担忧保留状态的问题了．　
　　现将具体实现做成一个小示例发上来，希望能对初学者有所帮助，因为我本身也是个初学者，在网络也上得到了其他人的不少帮助．：P
    ok,具体实现的流程如下：
　　１.由前端页面发送Ajax请求至服务器端．
　　　

　　　　　　　　　function QueryList(no){
    		var url="getXML.do";
    		var pars="pageNo="+no;
    		var ajax=new Ajax.Request(url,{
    		method:'get',
    		parameters:pars,
    		onComplete:showResponse
    		});
　　

　　　

         //回调
         function showResponse(request){
    		
    		var parser=new MyXmlParser();
    		parser.load(request);
    		var dataList=parser.itemList;
       		var pageList=parser.pageList;
       		showTable(dataList,pageList);
    	}
     

　　　这里用到的是prototype-1.4.0.js中的Ajax对象．
　　２.服务器端处理程序到数据库查询数据并生成xml档返回．
　　

　　　　StringBuffer resultXML = new StringBuffer();
		int pageNo = new Integer(request.getParameter("pageNo")).intValue();
		
		try {
			resultXML.append("<?xml version='1.0' encoding='gb2312'?>");
			resultXML.append("<ajax-response>\n");
			resultXML.append("<root>\n");

			Pagination page = new Pagination(request, 100);
			List list = this.getTestList(page.getStart(), page.getPageSize());
			for (int i = 0; i < list.size(); i++) {
				TestBean bean = (TestBean) list.get(i);
				resultXML.append("<data>\n");
				resultXML
						.append("\t<id>" + bean.getId().toString() + "</id>\n");
				resultXML.append("\t<name>" + bean.getName() + "</name>\n");
				resultXML.append("\t<sex>" + bean.getSex() + "</sex>\n");
				resultXML.append("\t<age>" + bean.getAge().toString()
						+ "</age>\n");
				resultXML.append("</data>\n");
			}

			resultXML.append("<pagination>\n");
			resultXML.append("\t<total>" + page.getTotal() + "</total>\n");
			resultXML.append("\t<start>" + page.getStart() + "</start>\n");
			resultXML.append("\t<end>" + page.getEnd() + "</end>\n");
			resultXML.append("\t<pageno>" + page.getPageNo() + "</pageno>\n");
			resultXML.append("</pagination>\n");

			resultXML.append("</root>\n");
			resultXML.append("</ajax-response>");
		} catch (Exception e) {
			e.printStackTrace();
		}
		writeResponse(request, response, resultXML.toString());

　　

３.在Ajax响应方法中对xml解析并生成表格显示到页面．
   

　　//显示数据
		 function showTable(dataList,pageList){
		    		try{
		    				//清单部分
		    				var bodyPanel=$("bodyPanel");
		    				var tab = document.createElement("table");
							tab.className="datagrid";
							tab.id="myTable";
							
						    bodyPanel.replaceChild(tab,bodyPanel.firstChild)
							
							var headerrow = tab.insertRow(0);
							 
							createNode(headerrow,'th','header','id');
							createNode(headerrow,'th','header','姓名');
							createNode(headerrow,'th','header','职业');
							createNode(headerrow,'th','header','工资');
							
						   	for(var i=0;i<dataList.length;i++){
								var row=tab.insertRow(i+1);
								row.className="rows";
								for(var j=0;j<4;j++){
									var col=row.insertCell(j);
									col.innerHTML=dataList[i][j];
								}
							}
							
							
							//分页部分
							var total=parseInt(pageList[0][0]);
							var start=parseInt(pageList[0][1]);
							var end=parseInt(pageList[0][2]);
							var current=parseInt(pageList[0][3]);
							
							var c1_HTML='显示 '+(1+start)+' 到 '+end+' 笔，共 '+total+' 笔';
							var c2_HTML='';
							
							if(start>0){
								var prvNo=current-1;
								c2_HTML+='<a href="javascript:QueryList('+prvNo+')">[上一页] </a>';
							}else{
								c2_HTML+='[上一页] ';
							}
							var totalPage=parseInt(total/10);
							if(total%10!=0){
								totalPage++;
							};
							for(var i=1; i <=totalPage; i++){
						            if(i == 2 && current-6 > 1){
						            	c2_HTML+='...';
						                i = current- 6;
						            } else if(i == current + 6 && current +6<totalPage){
						                c2_HTML+='...';
						                i = totalPage - 1;
						            } else{
						            	if(current==i){
						            		c2_HTML+='['+current+'] ';
						            	}else{
						            		c2_HTML+='<a href="javascript:QueryList('+i+')">'+i+'</a>'+' ';
						            	}
						            }
						    }
						    
							if(current<totalPage){
								var nextNo=current+1;
						    	c2_HTML+='<a href="javascript:QueryList('+nextNo+')">[下一页]</a>';
						    }else{
						    	c2_HTML+='[下一页]';
						    }
							var pagintion = document.createElement("table");
							pagintion.className="footer";
							var rightDiv=document.createElement('div');
							rightDiv.setAttribute("align","right");
							
							var row=pagintion.insertRow(0);
							var col_1=row.insertCell(0);
							var col_2=row.insertCell(1);
							
							col_1.innerHTML=c1_HTML;
							rightDiv.innerHTML=c2_HTML;
							col_2.appendChild(rightDiv);
							var footPanel=$("footPanel");
							footPanel.replaceChild(pagintion,footPanel.firstChild);
						}catch(e){
							alert("error");
						}
						highlightTableRows("myTable");
			}//end showTable

　　

其中还有用到的分页对象Pagination ，及页面的xml解析对象MyXmlParser这里就不贴code出来了．附件中有Demo.war包和project文件．感兴趣的朋友可以下载来看看．

测试环境如下：
JDK:1.5
开发工具：Eclipse3.1
部署服务器：Tomcat5.5


　

评论

1 楼 BBZ.DD.A 2007-09-08  

谢谢 不错...