|
|
相信大家对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,初学者,请指教 |
|