前段时间做项目过程中,碰到一个问题.有一个页面需要做级联式的提交,例如:输入查询条件,提交表单A.得到表单B,然后在根据表单B中check的勾选项,提交后得到清单C,在同一页面显示,问题是:在表单B提交之后,或者点击清单C分页查询时返回的页面都需要保留表单B中的状态,这里的处理的确会让人很头痛,于是最后决定在表单B的提交中使用Ajax,这样一来便无须担忧保留状态的问题了.
现将具体实现做成一个小示例发上来,希望能对初学者有所帮助,因为我本身也是个初学者,在网络也上得到了其他人的不少帮助.:P
ok,具体实现的流程如下:
1.由前端页面发送Ajax请求至服务器端.
[code]
function QueryList(no){
var url="getXML.do";
var pars="pageNo="+no;
var ajax=new Ajax.Request(url,{
method:'get',
parameters:pars,
onComplete:showResponse
});
[/code]
[code]
//回调
function showResponse(request){
var parser=new MyXmlParser();
parser.load(request);
var dataList=parser.itemList;
var pageList=parser.pageList;
showTable(dataList,pageList);
}
[/code]
这里用到的是prototype-1.4.0.js中的Ajax对象.
2.服务器端处理程序到数据库查询数据并生成xml档返回.
[code]
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());
[/code]
3.在Ajax响应方法中对xml解析并生成表格显示到页面.
[code]
//显示数据
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
[/code]
其中还有用到的分页对象Pagination ,及页面的xml解析对象MyXmlParser这里就不贴code出来了.附件中有Demo.war包和project文件.感兴趣的朋友可以下载来看看.
测试环境如下:
JDK:1.5
开发工具:Eclipse3.1
部署服务器:Tomcat5.5
现将具体实现做成一个小示例发上来,希望能对初学者有所帮助,因为我本身也是个初学者,在网络也上得到了其他人的不少帮助.:P
ok,具体实现的流程如下:
1.由前端页面发送Ajax请求至服务器端.
[code]
function QueryList(no){
var url="getXML.do";
var pars="pageNo="+no;
var ajax=new Ajax.Request(url,{
method:'get',
parameters:pars,
onComplete:showResponse
});
[/code]
[code]
//回调
function showResponse(request){
var parser=new MyXmlParser();
parser.load(request);
var dataList=parser.itemList;
var pageList=parser.pageList;
showTable(dataList,pageList);
}
[/code]
这里用到的是prototype-1.4.0.js中的Ajax对象.
2.服务器端处理程序到数据库查询数据并生成xml档返回.
[code]
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());
[/code]
3.在Ajax响应方法中对xml解析并生成表格显示到页面.
[code]
//显示数据
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
[/code]
其中还有用到的分页对象Pagination ,及页面的xml解析对象MyXmlParser这里就不贴code出来了.附件中有Demo.war包和project文件.感兴趣的朋友可以下载来看看.
测试环境如下:
JDK:1.5
开发工具:Eclipse3.1
部署服务器:Tomcat5.5