strurs2跟ajax的简单整合
日期：2014-05-16 浏览次数：20720 次
strurs2和ajax的简单整合
相信大家对ajax都有所了解吧，废话不多说，直接说功能，上传代码
网页上有个button，浏览者点击button，ajax请求struts2的action，从数据库中取得相应数据，然后将数据封装成一个xml文件的数据流，返回给前台，最后前台创建表格，解析xml文件类型的数据，将数据填充到表格中
html代码
相信大家对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; //计数器，防止用户多次点击button
var 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[i].getElementsByTagName("name"); //将数据依次填充到表格中
txt = x0[0].firstChild.nodeValue;
insertName.innerHTML=txt
x1=x[i].getElementsByTagName("id");
txt = x1[0].firstChild.nodeValue;
insertId.innerHTML=txt
x2=x[i].getElementsByTagName("bikeID");
txt = x2[0].firstChild.nodeValue;
insertBikeId.innerHTML=txt
x3=x[i].getElementsByTagName("startTime");
txt = x3[0].firstChild.nodeValue;
insertStartTime.innerHTML=txt
x4=x[i].getElementsByTagName("endTime");
txt = x4[0].firstChild.nodeValue;
insertEndTime.innerHTML=txt
x5=x[i].getElementsByTagName("allTime");
txt = x5[0].firstChild.nodeValue;
insertAllTime.innerHTML=txt
x6=x[i].getElementsByTagName("rentPrice");
txt = x6[0].firstChild.nodeValue;
insertRentPrice.innerHTML=txt
x7=x[i].getElementsByTagName("allMoney");
txt = x7[0].firstChild.nodeValue;
insertAllMoney.innerHTML=txt
}
catch(er) {
alert('error')
}
count++;
}
}
}
}
}
</SCRIPT>
</head>
<body>
<button onclick="showHistory('<s:property value="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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
