通过jquery的ajax+mysql+servlet实现省市二级联动菜单

最新推荐文章于 2020-03-31 21:02:27 发布

yand789

最新推荐文章于 2020-03-31 21:02:27 发布

阅读量359

点赞数

http://youzhibing.iteye.com/blog/1669626

前提：有jquery.ajax基础、对servlet熟悉、有数据库基础
原理：加载页面时向数据库获取所有的省展示在select元素中，当用户选中某个省份时，向服务器发送ajax请求，获取对应省份下的城市
1、html页面代码

     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

     Java代码   
     
   
 @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

     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下的项目的压缩文件

ProvinceAndCitys.rar (960.6 KB)
下载次数: 73

yand789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jquery的ajax+mysql+servlet实现省市二级联动菜单

http://youzhibing.iteye.com/blog/1669626 前提：有jquery.ajax基础、对servlet熟悉、有数据库基础原理：加载页面时向数据库获取所有的省展示在select元素中，当用户选中某个省份时，向服务器发送ajax请求，获取对应省份下的城市 1、html页面代码 Html代码 >
复制链接

扫一扫