strurs2和ajax的简单整合
相信大家对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, SafarixmlHttpReq = new XMLHttpRequest()}else {// code for IE6, IE5xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")}if(xmlHttpReq != null) {xmlHttpReq.onreadystatechange = onResponse//存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数xmlHttpReq.open("POST","Record_ShowRentHistory?name="+name+"",true)//使用post方式请求并传递namexmlHttpReq.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,有数据则显示tablefor(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.firstChild.nodeValue;insertName.innerHTML=txtx1=x.getElementsByTagName("id");txt = x1.firstChild.nodeValue;insertId.innerHTML=txtx2=x.getElementsByTagName("bikeID");txt = x2.firstChild.nodeValue;insertBikeId.innerHTML=txtx3=x.getElementsByTagName("startTime");txt = x3.firstChild.nodeValue;insertStartTime.innerHTML=txtx4=x.getElementsByTagName("endTime");txt = x4.firstChild.nodeValue;insertEndTime.innerHTML=txtx5=x.getElementsByTagName("allTime");txt = x5.firstChild.nodeValue;insertAllTime.innerHTML=txtx6=x.getElementsByTagName("rentPrice");txt = x6.firstChild.nodeValue;insertRentPrice.innerHTML=txtx7=x.getElementsByTagName("allMoney");txt = x7.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,初学者,请指教http://www.agoit.com/images/smiles/icon_wink.gif
页:
[1]