您的位置：首页 > 其它

Ajax制作二级联动下拉列表框

2012-05-23 13:37 302 查看

1.index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" language="javaScript">
var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//旧版本的Internet Explorer，创建XMLHttpRequest对象
} catch(e) {
window.alert("创建XMLHttpRequest对象错误"+e);
}
}
} else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
xmlHttp = new XMLHttpRequest();
}
if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
window.alert("创建XMLHttpRequest对象异常！");
}
}

//下拉列表项改变时的操作
function proChange(objVal) {
createXMLHttpRequest(); //创建XMLHttpRequest对象
document.getElementById("city").length = 1;     //根据ID获取指定元素，并赋值
xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数
var url = "/ComboTest/servlet/CityServlet?province=" + objVal; //请求的URL地址
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function cityList() { //onreadystatechange的处理函数
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
parseXML(xmlHttp.responseXML);     //解析服务器返回的XML数据
}
}
}

//解析xml信息，以添加地市
function parseXML(xmlDoc) {
var len = xmlDoc.getElementsByTagName("city");
//获取XML数据中所有的“city”元素对象集合
var _citySel = document.getElementById("city");     //根据ID获取页面中的select元素
for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项
var opt = document.createElement("OPTION");     //创建option对象
opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新创建元素的text属性值
opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新创建元素的value属性值
_citySel.add(opt); //为select元素添加option
}
}
</script>
<title>动态加载组合框</title>
</head>
<body>
<table align="center" border=1 width="320">
<tr>
<td>省份：</td>
<td>
<select id="province" onchange="proChange(this.value);" style="width:85">
<option value="gd">广东</option>
<option value="gx">广西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
<option value="ah">安徽</option>
</select>
</td>
</tr>
<tr>
<td>地市：</td>
<td>
<select id="city" style="width:85">
<option value="">--请选择--</option>
</select>
</td>
</tr>
</table>
</body>
</html>

2.CityServlet.java

public class CityServlet extends HttpServlet {
private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
//设置返回响应的ContentType
/**
*当前Servlet对象构造方法
*/
public CityServlet() {
super();
}
/**
* 当前Servlet销毁时的操作。<br>
*/
public void destroy() {
super.destroy();
}
/**
* 当前Servlet的doGet方法。<br>
*
* 当客户端表单的“method”类型为“get”时，调用此方法
*
* @param request客户端请求对象
* @param response 服务器响应对象
* @throws ServletException 发生ServeltException时抛出
* @throws IOException 发生IOException时抛出
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(CONTENT_TYPE); //设置服务器响应类型
String province =request.getParameter("province");
StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象
List list = cityInit(); //获取城市列表
if("gx".equals(province)) {
for(int i=0;i<list.size();i++) {
city.append("<city>"+list.get(i)+"</city>");
}
}
city.append("</citys>");
PrintWriter out = response.getWriter();
out.print(city.toString());
out.flush(); //输出流刷新
out.close(); //关闭输出流
}

/*
* 初始化城市
*/
public List<String> cityInit() {
List<String> cityList = new ArrayList<String>();
//添加城市列表
cityList.add("南宁");
cityList.add("桂林");
cityList.add("北海");
cityList.add("河池");
cityList.add("梧州");
cityList.add("玉林");
return cityList;
}

/**
*当前Servelt的初始化方法. <br>
*
* @throws ServletException发生ServletExceptio时抛出
*/
public void init() throws ServletException {
}
}

3.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>CityServlet</servlet-name>
<servlet-class>wen.CityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CityServlet</servlet-name>
<url-pattern>/servlet/CityServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航