通过ajax访问后台----参数通过post方式传递

通过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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值