[b]通过jquery的ajax实现省市二级联动菜单[/b]
前提:有jquery.ajax基础、对servlet熟悉、有数据库基础
[b]原理:加载页面时向数据库获取所有的省展示在select元素中,当用户选中某个省份时,向服务器发送ajax请求,获取对应省份下的城市[/b]
1、html页面代码
html页面主要是jquery的ajax,至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息,这些问题在我的[url]http://youzhibing.iteye.com/admin/blogs/1636755[/url]这篇博客中有提到,原理是一样的
2、服务器端:servlet
配置文件:web.xml
有问题、有意见都可以给我留言哦!
下面提供了myeclipse下的项目的压缩文件
前提:有jquery.ajax基础、对servlet熟悉、有数据库基础
[b]原理:加载页面时向数据库获取所有的省展示在select元素中,当用户选中某个省份时,向服务器发送ajax请求,获取对应省份下的城市[/b]
1、html页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级联动菜单</title>
<script src="js/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){ //等待DOM加载完毕.
var province = jQuery("#province");
var city = jQuery("#city");
getProvince();
province.change(function(){
getCity(province.val()); //参数是选择框选中的value
//jQuery("#oppro").attr("disabled","true");
});
})
});
function getProvince(){
jQuery.ajax({
type: "post",
url: "data",
data:{param:"province"},
success: function(data){
var pros =(new Function("","return "+data))();
for(var i=0;i<pros.data.length;i++){
jQuery("#province").append("<option value="+(i+1)+">" + pros.data[i] + "</option>");
}
}
});
}
function getCity(provinceValue){
if("0" == provinceValue){
jQuery("#city").empty();
jQuery("#city").append("<option value='0'>请选择城市</option>");
}else{
jQuery.ajax({
type: "post",
url: "data",
data:{param:"city",optionValue:provinceValue},
success: function(data){
var citys =(new Function("","return "+data))();
jQuery("#city").empty();
jQuery("#city").append("<option value='0'>请选择城市</option>");
for(var i=0;i<citys.data.length;i++){
jQuery("#city").append("<option value="+(i+1)+">" + citys.data[i] + "</option>");
}
}
});
}
}
</script>
</head>
<body>
<form id="form1">
<select id="province">
<option value="0" id="oppro">请选择省份:</option>
</select>
<select id="city">
<option value="0" id="opcity">请选择城市:</optio
</select>
</form>
</body>
</html>
html页面主要是jquery的ajax,至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息,这些问题在我的[url]http://youzhibing.iteye.com/admin/blogs/1636755[/url]这篇博客中有提到,原理是一样的
2、服务器端:servlet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String param = req.getParameter("param");
ResultSet rs = null;
//取得省份列表
if("province".equals(param)){
try {
rs = getPreparedStatement().executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
}
//取得城市列表
if("city".equals(param)){
int optionValue = Integer.parseInt(req.getParameter("optionValue"));
try {
rs = getPreparedStatement(optionValue).executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
}
//返回数据给页面
String data="{data:[";
try {
while(rs.next()){
data += "\"" + rs.getString(2) + "\",";
}
} catch (SQLException e) {
e.printStackTrace();
}
data = data.substring(0, data.lastIndexOf(',')) + "]}";
resp.setContentType("text/html;charset=gb2312");
resp.setCharacterEncoding("gb2312");// 防止弹出的信息出现乱码
resp.getWriter().write(data);
}
配置文件:web.xml
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>data</servlet-name>
<servlet-class>com.province.city.DataFromMysql</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>data</servlet-name>
<url-pattern>/data</url-pattern>
</servlet-mapping>
有问题、有意见都可以给我留言哦!
下面提供了myeclipse下的项目的压缩文件