做OA中，有个基于ajax的联动查询，实现在部门下拉列表中，选择一个部门，员工下拉列表显示出当前选择部门的所有员工。
先贴页面代码（jQuery1.6.2）：
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="<%=basePath %>js/jquery-1.6.2.js" charset="gbk"></script>
<style type="text/css">
td{text-align:center;}
</style>
<script type="text/javascript">
var $j = jQuery.noConflict();//防止jQuery与其他类库冲突，可单独定义个新的变量来代替以前的$，或者使用该函数后，直接使用jQuery来代替 $
$j(document).ready(function(){
$j("#dept").change(function(){ //部门下拉列表变换事件
if($j("#dept").val()!=="000"){
$j.ajax({ //jQuery ajax
dataType : "xml", //设置ajax期待返回的文档类型
type : "POST", //设置ajax的提交方式
url : "<%=basePath+"user.do"%>", //设置ajax的提交路径
async : true, //设置是否异步，true为异步，false为同步，同步情况下会锁住用户的操作界面
data : "action=combo&did="+$j("#dept").val(), //设置post方式传过去的参数
success : function(msg){ //成功回调函数
if(msg!=null && msg){ //判断返回的文档是否为空，切记千万不能使用msg!=""
$j("#user").html("");
$j(msg).find("option").each(function(i){ //jQuery处理xml文档
var text = $j(this).children("text").text();
var value = $j(this).children("value").text();
$j("#user").append("<option value='"+value+"'>"+text+"</option>"); //向user下拉列表添加解析的内容
//$j("<option value='"+value+"'>"+text+"</option>").appendTo("#user");
});
}
}
});
}
});
});
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" valign="middle">
部门
<select name="select" id="dept">
<option value="000">----请选择----</option>
<option value="001">行政部</option>
<option value="002">技术部</option>
<option value="003">秘书部</option>
</select>
员工
<select name="select2" id="user">
<option value="000">----请选择----</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
后台action代码：
public Hashtable<String, Object> combo(HttpServletRequest request,
HttpServletResponse response, Hashtable<String, Object> tb) {
try {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires", 0);
String did = request.getParameter("did") == null ? ""
: request.getParameter("did").trim();
String hql = "FROM TSmsUser u WHERE u.MIsdel!=''";
StringBuffer sb = new StringBuffer();
sb.append("<root>");
if("001".equals(did)){
sb.append("<option>");
sb.append("<value>001</value>");
sb.append("<text>张三</text>");
sb.append("</option>");
}
if("002".equals(did)){
sb.append("<option>");
sb.append("<value>004</value>");
sb.append("<text>张三</text>");
sb.append("</option>");
sb.append("<option>");
sb.append("<value>003</value>");
sb.append("<text>大王</text>");
sb.append("</option>");
}
if("003".equals(did)){
sb.append("<option>");
sb.append("<value>008</value>");
sb.append("<text>XSAD</text>");
sb.append("</option>");
sb.append("<option>");
sb.append("<value>007</value>");
sb.append("<text>ASDA</text>");
sb.append("</option>");
}
sb.append("</root>");
response.getWriter().write(sb.toString());
response.getWriter().flush();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
运行：
上面运行无误，后台action只需要调用service层查询出来就可以
在代码过程中，我在判断msg是否为空的时候，加了msg!=""，结果报错，在加上的是IE测试，一直报告对象不支持次属性，但是他显示的行号和eclipse里面的行号对不上，原来在IE报错显示的行号时，是IE浏览器以源代码方式查看显示出来的行号，因为jsp源代码顶部有些jsp脚本代码，会占去一些行数，所以IE报错的行号就和jsp源代码的行号不匹配，以后谨记呀。
