ajax的列表联动示例
1、 输入域:
请选择省:
<select id="sel1" onchange="return choose(this);">
<option value="">--请选择--</option>
<option value="1">湖南省</option>
<option value="2">湖北省</option>
</select>
请选择市:
<select id="sel2">
<option value="">--请选择--</option>
</select>
2、 JavaScript脚本:
var xmlHttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpReuqest();
}
}
//选择下列列表中的值
function choose(obj) {
var province = obj.value;
createXMLHttpRequest();
xmlHttp.onreadystatechange = process;
xmlHttp.open("GET", "SelProvince?province=" + province);
xmlHttp.send(null);
}
//用来处理状态改变的函数
function process() {
//定义一个变量用于存放从服务器返回的响应结果
var result;
if(xmlHttp.readyState == 4) { //如果响应完成
if(xmlHttp.status == 200) { //如果返回成功
//取出服务器返回的XML中city标签的子结点
result = xmlHttp.responseXML.getElementsByTagName("city");
//先清除地市列表的现有内容
while(document.all.sel2.options.length > 0) {
document.all.sel2.removeChild(document.all.sel2.childNodes[0]);
}
//解析xml文件的数据,并更新到本地列表
for(var i=0; i<result.length; i++) {
var option = document.createElement("OPTION");
option.text = result[i].childNodes[0].childNodes[0].nodeValue;
option.value = result[i].childNodes[1].childNodes[0].nodeValue;
document.all.sel2.options.add(option);
}
}
}
}
3、 Servlet文件:(SelProvince.java文件中的doGet方法)
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String province = request.getParameter("province");
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.println("<response>");
if("1".equals(province)) {//如果选择的是“湖南省”
out.println("<city>");
out.println("<cityname>长沙</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>常德</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
} else {
out.println("<city>");
out.println("<cityname>武汉</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>仙桃</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
}
out.println("</response>");
out.flush();
out.close();
}
4、 web.xml文件配置:
<servlet>
<servlet-name>SelProvince</servlet-name>
<servlet-class>com.solid.util.SelProvince</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelProvince</servlet-name>
<url-pattern>/SelProvince</url-pattern>
</servlet-mapping>