http://youzhibing.iteye.com/blog/1669626
前提:有jquery.ajax基础、对servlet熟悉、有数据库基础
原理:加载页面时向数据库获取所有的省展示在select元素中,当用户选中某个省份时,向服务器发送ajax请求,获取对应省份下的城市
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,至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息,这些问题在我的 http://youzhibing.iteye.com/admin/blogs/1636755这篇博客中有提到,原理是一样的
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下的项目的压缩文件