简单的无刷新 ajax 级联-优快云博客

//前台ajax页面

<html>
<head>
<title></title>
<script type="text/javascript">
var req;
function session(callback, url, param,objArray) {

if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
  }
}
req.open("post", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onreadystatechange = function(){callback(objArray);}
if (param == null) {
  param = 1;
}
req.send(param);
}
function getlist(objArray){
if(req.readyState == 4){
  if(req.status ==200){
   var data = req.responseText;
   if(objArray ==1){
    document.getElementById("country").style.display ="block";
    document.getElementById("country").innerHTML = data;
   }
    if(objArray ==2){
    document.getElementById("city").style.display ="block";
    document.getElementById("city").innerHTML = data;
   }
  }
}

}
</script>
<style type="text/css">
li{
display:block;
width:120px;
list-style-type:none;
float:left;
margin:0;
padding:4;

}
ul{
width:600px;
float:left;
margin:0;
padding:0;
text-align:left;
}
</style>
</head>
<body>
<table align=center>
<tr><td><div id="continent">
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=ASIA','1')">亚洲</a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=EUROPE','1')">欧洲 </a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=AMERICA','1')">美洲 </a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=AFRICA','1')">非洲</a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=OCEANIA','1')">大洋洲 </a>
</div></td></tr>
<tr><td><div id="country" style="display:none"></div></td></tr>
<tr><td><div id="city" style="display:none"></div></td></tr></table>
</body>
</html>