public class ProvLoad extends HttpServlet {
Ajax001 a1=new Ajax001();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<String> prolist=a1.loadPro();
StringBuffer sb=new StringBuffer("[");
for(int i=0;i<prolist.size();i++){
sb.append(prolist.get(i));
if(i<prolist.size()-1){
sb.append(",");
}
}
sb.append("]");
response.setContentType("text/json; charset=utf-8");
response.getWriter().println(sb.toString());
}
}
ajax js文件
function createXmlHttpRequest(){
var xmlhttp = null;
try{
//Firefox, Opera 8.0+, Safari
xmlhttp=new XMLHttpRequest();
}catch(e){//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
var MSXML =
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n = 0; n < MSXML.length; n ++){
try{
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}}
}
return xmlhttp;
}
function loadcity(name){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 ||(xhr.status==200 || xhr.status==304)){
alert(xhr.responseText);
var ret=eval("("+xhr.responseText+")");
alert("ret lenght:"+ret.length);
var v="";
for(var i=0;i<ret.length;i++){
// alert("retX="+ret[i]);
v+="<option>"+ret[i]+"</option>";
}
//alert("v:"+v);
document.getElementById("city").innerHTML=v;
}
}
xhr.open("post","servlet/CityLoad",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
alert(name);
xhr.send("name="+name);
}
function loadpro(){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 ||(xhr.status==200 || xhr.status==304)){
var ret=eval("("+xhr.responseText+")");
var s="<option>--</option>";
for(var i=0;i<ret.length;i++){
s+="<option>"+ret[i]+"</option>";
}
document.getElementById("pro").innerHTML=s;
}
}
xhr.open("get","servlet/ProvLoad",true);
xhr.send(null);
}
window.οnlοad=loadpro;
页面内容
选择省份<select id="pro" οnchange="loadcity(this.value)"></select>选择城市<select id="city"></select>