通过ajax访问后台----参数通过post方式传递
1,前台页面:
<div id="testDiv">
<table>
<tr><td οnclick="testAjaxPost();">...</td></tr>
... ... ... ...
</table>
</div>
2,JS方法:
// ajax对象
var xmlHttp;
function testAjaxPost() {
var url = "DevelopWeek!dealChartData.action";
// 下面为需要传递的参数,encodeURIComponent为解决中文乱码的方法
var param = "kpiID="+kpiID+"&kpiType="+kpiType+"&strFourWeek="+strFourWeek+"&kpiDesc="+encodeURIComponent(kpiDesc) + "&kpiDimUniStr=is null";
ajaxCommon(url, param, 'freshenKpiChart');
}
// ajax局部刷新
function ajaxCommon (url, param, methodName) {
createHttpRequest();
if (methodName == 'handleState') {
xmlHttp.onreadystatechange = handleState;
xmlHttp.open('post', url, true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // post方式传递参数,就必须加上这一句
xmlHttp.send(param); // post方式传递参数,就必须把参数放到send里
}
if (methodName == 'freshenKpiChart') {
// xmlHttp2是另外一个请求,可以创建多个
xmlHttp2.onreadystatechange = freshenKpiChart;
xmlHttp2.open('post', url, true);
xmlHttp2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // post方式传递参数,就必须加上这一句
xmlHttp2.send(param); // post方式传递参数,就必须把参数放到send里
}
}
// 创建ajax对象
function createHttpRequest () {
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
}
function handleState () {
try {
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var data = xmlHttp.responseText; // 取得后台返回的数据,可以是JSON数据,拼的表格,单个字符串等等
var dataArray = new Array();
// dataArray[0]为fourWeekList,dataArray[1]为weekNumList,dataArray[2]为theadList,dataArray[3]为maxNum
dataArray = data.split('==');
document.getElementById('testDiv').innerHTML = dataArray[1]; // 局部刷新表格,假设后台返回来的数据是拼成的表格
}else{
window.alert("请求页面异常");
}
}
} catch(error) {
error.message;
}
}
function freshenKpiChart () {
try {
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var res = xmlHttp2.responseText; // 取得后台返回的数据,可以是JSON数据,拼的表格,单个字符串等等
.................................
}else{
window.alert("请求页面异常");
}
}
} catch(error) {
error.message;
}
}
3,后台的java代码:
DevelopWeek.java中的dealChartData方法
public String dealChartData() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
// 方式一:循环取出post方式传来的参数
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
e.hasMoreElements();
String h = (String) e.nextElement();
String v = request.getParameter(h);
String mm = java.net.URLDecoder.decode(v, "UTF-8");
System.out.println("请求参数: " + h + " = " + mm);
}
/* // 方式二:直接通过request也可以取出来
System.out.println("kpiID: " + request.getParameter("kpiID"));
System.out.println("kpiType: " + request.getParameter("kpiType"));
System.out.println("kpiDesc: " + request.getParameter("kpiDesc"));
System.out.println("strFourWeek: " + request.getParameter("strFourWeek"));
System.out.println("kpiDimUniStr: " + request.getParameter("kpiDimUniStr"));
*/
// 方式三:struts2中不用自己取值,会自动set到值栈中,可以直接得到
/* System.out.println("kpiID: " + this.kpiID);
System.out.println("kpiType: " + this.kpiType);
System.out.println("strFourWeek: " + this.strFourWeek);
System.out.println("kpiDimUniStr: " + this.kpiDimUniStr);
*/
/其实,不管是通过get,还是post方式提交请求,都是通过request来取值的
StringBuilder kpiWeekChartData = new StringBuilder();
kpiWeekChartData = selectTableChartData();
String table_ChartListJson = Utils.toJsonString(this.table_ChartList);
response.setCharacterEncoding("UTF-8");
// 需要返回多组数据,可以用某些特定的字符(==)区分,前台可以通过该字符(==)用split分割返回值
response.getWriter().write("{" + "\"chartTableJsonData\"" + ":" + table_ChartListJson + "}" + "==" + kpiWeekChartData);
return null;
}