前面简单记录了 get方式使用ajax,这里再记录一下post方式,大多数与get方式相同,这里只记录一下主要部分:
var XMLHttpReq = false; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest(); }else if(window.ActiveXObject){ XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP"); }else { alert("未能创建XMLHttpRequest对象"); return false; } } function sendRequestPost(url,param){ createXMLHttpRequest(); XMLHttpReq.open("POST",url,false); XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); XMLHttpReq.onreadystatechange = processResponse; XMLHttpReq.send(param); } function processResponse(){ var obj = document.getElementById("res"); if(XMLHttpReq.readyState == 4){ // obj.innerHTML ="开始筛数据,请稍候...."; if(XMLHttpReq.status == 200){ obj.innerHTML = XMLHttpReq.responseText; runningFlag=false; } else{ obj.innerHTML =""; runningFlag=false; window.alert("你请求的页面有异常,XMLHttpReq.status:"+XMLHttpReq.status+" ,txt="+XMLHttpReq.responseText); } } }
关于param参数,和get方式差不多,“key1=value&key2=value2”的样式,但这样存在一个问题,一个个拼接起来非常麻烦,而且容易出错。但如果使用js的Array来使用拼接这些key、value就很方便了。简单demo如下:
function getForm(){ var aParams = new Array(); if(document.form1.filter_email.checked==true){ aParams.push("filter_email=yes"); aParams.push("bind_email_select="+getSelect(document.form1.bind_email_select)); } if(document.form1.filter_sms.checked==true){ aParams.push("filter_sms=yes"); aParams.push("baoyue_select="+getSelect(document.form1.baoyue_select)); } if(document.form1.filter_preference.checked==true){ aParams.push("filter_preference=yes"); for(var i=0;i<document.form1.preferences.length;i++){ if(document.form1.preferences[i].selected==true){ aParams.push("preferences="+document.form1.preferences[i].value); } } } return aParams.join("&"); }
从上述demo中,可以看出,使用方法很简单,先往array中push key、value,最后返回的时候,用join方法,这样就将各组key、value用&符号连接起来了。使出错的几率大大减小。另外,对于select下拉框,多选时,可用 key、value向array中push多组key相同,但value不同的值。在后台获取值的方式用:
request.getParameter("filter_email");
String [] preferences=request.getParameterValues("preferences");
跟平时获取参数值的方法一样。
--- 调用ajax请求的方法:
sendRequestPost("selectByFilter.do",getForm());