六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 23|回复: 0

strurs2和ajax的简单整合

[复制链接]

升级  20%

2

主题

2

主题

2

主题

童生

Rank: 1

积分
10
 楼主| 发表于 2013-1-29 10:33:34 | 显示全部楼层 |阅读模式
相信大家对ajax都有所了解吧,废话不多说,直接说功能,上传代码
网页上有个button,浏览者点击button,ajax请求struts2的action,从数据库中取得相应数据,然后将数据封装成一个xml文件的数据流,返回给前台,最后前台创建表格,解析xml文件类型的数据,将数据填充到表格中

html代码
<%@ page language="java" contentType="text/html; charset=gbk"%><%@taglib prefix="s" uri="/struts-tags"%><html><head><title>ajax and struts2</title><SCRIPT type="text/javascript">var count = 0;//计数器,防止用户多次点击buttonvar xmlHttpReq;//XMLHttpRequest 对象function showHistory(name){//显示历史记录的函数if(count > 0) {//多次点击无效return}if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlHttpReq = new XMLHttpRequest()  }  else {// code for IE6, IE5  xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")  }if(xmlHttpReq != null) {  xmlHttpReq.onreadystatechange = onResponse//存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数  xmlHttpReq.open("POST","Record_ShowRentHistory?name="+name+"",true)//使用post方式请求并传递name  xmlHttpReq.send()//将请求发送到服务器  }}function onResponse() {  if(xmlHttpReq.readyState == 4) {//请求已完成,且响应已就绪  if(xmlHttpReq.status == 200) {//200: "OK";404: 未找到页面  x = xmlHttpReq.responseXML.getElementsByTagName("column");//得到column标签  if(x.length > 0) {//xml文件含有数据  var tableshow = document.getElementById('historytable');  tableshow.style.display=""//原来设置为不显示table,有数据则显示table  for(i=0;i<x.length;i++) {//循环读取xml文件中的数据  try{  var tablex =document.getElementById('historytable').insertRow(i+1)//table增加一行  tablex.align="center"//数据居中显示  var insertName = tablex.insertCell(0)//第一列,依次类推  var insertId = tablex.insertCell(1)  var insertBikeId = tablex.insertCell(2)  var insertStartTime= tablex.insertCell(3)  var insertEndTime= tablex.insertCell(4)  var insertAllTime = tablex.insertCell(5)  var insertRentPrice = tablex.insertCell(6)  var insertAllMoney = tablex.insertCell(7)  x0=x.getElementsByTagName("name");//将数据依次填充到表格中  txt = x0[0].firstChild.nodeValue;  insertName.innerHTML=txt  x1=x.getElementsByTagName("id");  txt = x1[0].firstChild.nodeValue;  insertId.innerHTML=txt  x2=x.getElementsByTagName("bikeID");  txt = x2[0].firstChild.nodeValue;  insertBikeId.innerHTML=txt  x3=x.getElementsByTagName("startTime");  txt = x3[0].firstChild.nodeValue;  insertStartTime.innerHTML=txt  x4=x.getElementsByTagName("endTime");  txt = x4[0].firstChild.nodeValue;  insertEndTime.innerHTML=txt  x5=x.getElementsByTagName("allTime");  txt = x5[0].firstChild.nodeValue;  insertAllTime.innerHTML=txt  x6=x.getElementsByTagName("rentPrice");  txt = x6[0].firstChild.nodeValue;  insertRentPrice.innerHTML=txt  x7=x.getElementsByTagName("allMoney");  txt = x7[0].firstChild.nodeValue;  insertAllMoney.innerHTML=txt  }   catch(er) {  alert('error')  }  count++;  }  }  }  }  }</SCRIPT></head><body><button name"/>')">显示历史租车记录</button><table align="center" border="5" id="historytable"style="display: none"><tr align="center"><td>用户名</td><td>租赁编号</td><td>自行车编号</td><td>租车起始时间</td><td>租车结束时间</td><td>时间差(小时)</td><td>租赁价格(X元/每小时)</td><td>消费金额</td></tr></table></center></body></html>

struts2中的action
/** * 处理利用ajax的异步请求方法 */public String executeShowRentHistory() throws Exception{HttpServletResponse hsr =  ServletActionContext.getResponse();hsr.setContentType("text/xml;charset=gbk");StringBuffer sb = new StringBuffer();sb.append("<?xml version=\"1.0\"?>");//添加xml文件头sb.append("<history>");//根标签records = recordManager.getHistoryData(name);//调用service层,返回一个listfor(Record record: records) {//封装成xml文件sb.append("<column>");sb.append("<name>"+name+"</name>");sb.append("<id>"+record.getId()+"</id>");sb.append("<bikeID>"+record.getBike().getId()+"</bikeID>");sb.append("<startTime>"+record.getStartTime()+"</startTime>");sb.append("<endTime>"+record.getEndTime()+"</endTime>");double allTime = Calculate.calculateTime(record.getStartTime(), record.getEndTime());//计算时间差(结束时间减去起始时间)sb.append("<allTime>"+allTime+"</allTime>");sb.append("<rentPrice>"+record.getRentPrice()+"</rentPrice>");sb.append("<allMoney>"+record.getRentPrice()*allTime+"</allMoney>");sb.append("</column>");}sb.append("</history>");try {hsr.getWriter().write(sb.toString());//转换成字符串给response返回} catch (Exception e) {e.printStackTrace();}finally {hsr.getWriter().close();}return null;//不需要返回任何字符串给result}
还有一些get和set方法,以及service层和dao层未给出
算是一个简单的struts2和ajax的整合吧,后台是ssh2+mysql,初学者,请指教
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表