开发者社区> 聚优云惠> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

AJAX完成三级级下拉联动【省份-城市-区域】

简介: AJAX应用案例--基于mysql,以POST方式,用DOM对象,完成三级级下拉联动【省份-城市-区域】,效果图如下: 数据库如下: 省份                        ...
+关注继续查看

AJAX应用案例--基于mysql,以POST方式,用DOM对象,完成三级级下拉联动【省份-城市-区域】,效果图如下:



数据库如下:

省份                                               城市                                                                                       区域



Jsp页面代码:

[html] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.   <body>  
  5.     <select id="provinceID">  
  6.         <option>请选择省份</option>  
  7.         <option value="1">广东</option>  
  8.         <option value="2">湖南</option>  
  9.     </select>  
  10.     <select id="cityID">  
  11.         <option>请选择城市</option>  
  12.     </select>  
  13.     <select id="areaID">  
  14.         <option>请选择区域</option>  
  15.     </select>  
  16.     <script type="text/javascript">  
  17.         function createAJAX(){  
  18.             var ajax = null;  
  19.             try{  
  20.                 ajax = new ActiveXObject("microsoft.xmlhttp");  
  21.             }catch(e){  
  22.                 try{  
  23.                     ajax = new XMLHttpRequest();  
  24.                 }catch(e){  
  25.                     alert("请更换浏览器");  
  26.                 }  
  27.             }  
  28.             return ajax;  
  29.         }  
  30.     </script>  
  31.     <script type="text/javascript">  
  32.         //创建AJAX引擎对象  
  33.         var ajax = createAJAX();  
  34.         //产生事件  
  35.         document.getElementById("provinceID").onchange = function(){  
  36.                 //再次选择省份时,清空city下拉框  
  37.               //定位city下拉框  
  38.               var citySelectElement = document.getElementById("cityID");  
  39.               var optionElementArray = citySelectElement.options;  
  40.               var size = optionElementArray.length;  
  41.               if(size>1){  
  42.                 for(var i=size-1;i>0;i--){  
  43.                     citySelectElement.removeChild(optionElementArray[i]);  
  44.                 }  
  45.               }  
  46.                 
  47.               //再次选择省份时,清空area下拉框  
  48.                //定位area下拉框  
  49.               var areaSelectElement = document.getElementById("areaID");  
  50.               var areaOptionArray = areaSelectElement.options;  
  51.               var size = areaOptionArray.length;  
  52.               if(size>1){  
  53.                 for(var i=size-1;i>0;i--){  
  54.                     areaSelectElement.removeChild(areaOptionArray[i]);  
  55.                 }  
  56.               }  
  57.                 
  58.                 
  59.               //获取选中省份的编号  
  60.               var optionElement = this[this.selectedIndex];   
  61.               var provinceId = optionElement.value;  
  62.               //准备发送请求  
  63.               var method = "POST";  
  64.               var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();  
  65.               ajax.open(method,url);  
  66.               //设置以POST表单形式发送,自动将请求体的中文进行编码    
  67.               ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");      
  68.               //真正发送请求体中的数据  
  69.               var content = "provinceId="+provinceId + "&method=provinceToCity";  
  70.               ajax.send(content);  
  71.               //监听服务端的响应  
  72.               ajax.onreadystatechange = function(){  
  73.                 if(ajax.readyState==4){  
  74.                     if(ajax.status==200){  
  75.                         var jsonJavaString = ajax.responseText;  
  76.                         //jsonJavaString = [{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]  
  77.                         var json = eval("("+jsonJavaString+")");  
  78.                         //返回值,就是可解析并执行的JavaScript代码  
  79.                         //json = [{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]  
  80.                         var size = json.length;  
  81.                         //迭代  
  82.                         for(var i=0;i<size;i++){  
  83.                             var city = json[i].name;  
  84.                             var cid = json[i].id;  
  85.                             //创建option节点  
  86.                             var optionElement = document.createElement("option");  
  87.                             //设置option节点之间的内容  
  88.                             optionElement.innerHTML = city;  
  89.                             optionElement.setAttribute("value",cid);  
  90.                             //添加到city下拉框中  
  91.                             citySelectElement.appendChild(optionElement);  
  92.                         }  
  93.                     }  
  94.                 }  
  95.               };  
  96.         };  
  97.           
  98.         //===============================cityToArea==================================================  
  99.         //产生事件  
  100.         document.getElementById("cityID").onchange = function(){  
  101.               
  102.               //再次选择城市时,定位area下拉框,清空area下拉框  
  103.               var areaSelectElement = document.getElementById("areaID");  
  104.               var areaOptionArray = areaSelectElement.options;  
  105.               var size = areaOptionArray.length;  
  106.               if(size>1){  
  107.                 for(var i=size-1;i>0;i--){  
  108.                     areaSelectElement.removeChild(areaOptionArray[i]);  
  109.                 }  
  110.               }  
  111.               //获取选中城市的编号  
  112.               var optionElement = this[this.selectedIndex];   
  113.               var cid = optionElement.value;  
  114.               //准备发送请求  
  115.               var method = "POST";  
  116.               var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();  
  117.               ajax.open(method,url);  
  118.               //设置以POST表单形式发送,自动将请求体的中文进行编码    
  119.               ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");      
  120.               //真正发送请求体中的数据  
  121.               var content = "cid="+cid + "&method=cityToArea";  
  122.               ajax.send(content);  
  123.               //监听服务端的响应  
  124.               ajax.onreadystatechange = function(){  
  125.                 if(ajax.readyState==4){  
  126.                     if(ajax.status==200){  
  127.                         var jsonJavaString = ajax.responseText;  
  128.                         //jsonJavaString = [{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]  
  129.                         var json = eval("("+jsonJavaString+")");  
  130.                         //返回值,就是可解析并执行的JavaScript代码  
  131.                         //json = [{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]  
  132.                         var size = json.length;  
  133.                         //迭代  
  134.                         for(var i=0;i<size;i++){  
  135.                             var area = json[i].name;  
  136.                             //var cid = json[i].name;  
  137.                             //创建option节点  
  138.                             var optionElement = document.createElement("option");  
  139.                             //设置option节点之间的内容  
  140.                             optionElement.innerHTML = area;  
  141.                             //optionElement.setAttribute("id",cid);  
  142.                             //添加到city下拉框中  
  143.                             areaSelectElement.appendChild(optionElement);  
  144.                         }  
  145.                     }  
  146.                 }  
  147.               };  
  148.         };  
  149.     </script>  
  150.       
  151.       
  152.       
  153.   </body>  
  154. </html>  

servlet代码:

[java] view plaincopy
  1. package kerwin.servlet;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.List;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11.   
  12. import kerwin.bean.Area;  
  13. import kerwin.bean.City;  
  14. import kerwin.service.ProvinceCityAreaService;  
  15. import net.sf.json.JSONArray;  
  16. import net.sf.json.JsonConfig;  
  17.   
  18. public class ProvinceCityAreaServlet extends HttpServlet {  
  19.       
  20.     ProvinceCityAreaService service = new ProvinceCityAreaService();  
  21.       
  22.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  23.           
  24.         request.setCharacterEncoding("utf-8");  
  25.         String method = request.getParameter("method");  
  26.         if("provinceToCity".equals(method)){  
  27.             this.ProvinceToCity(request, response);  
  28.         }else if("cityToArea".equals(method)){  
  29.             this.cityToArea(request, response);  
  30.         }  
  31.           
  32.     }  
  33.   
  34.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  35.         doGet(request, response);  
  36.     }  
  37.       
  38.     public void ProvinceToCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  39.         response.setContentType("text/html; charset=utf-8");  
  40.         PrintWriter out = response.getWriter();  
  41.           
  42.         List<City> citys = null;  
  43.         //获取参数  
  44.         String pid = request.getParameter("provinceId");  
  45.         try {  
  46.               
  47.             citys = service.findAllCityByProvince(pid);   
  48.               
  49.             //使用第三方工具类,将对象转成JSON格式的字符串  
  50.             JsonConfig config = new JsonConfig();  
  51.             //去掉不需要的参数  
  52.             //config.setExcludes(new String[]{"id"});  
  53.             //将citys转换为json格式的字符串  
  54.             JSONArray jsonArray = JSONArray.fromObject(citys, config);  
  55.             String jsonJavaStr = jsonArray.toString();  
  56.               
  57.             //将字符串响应给ajax引擎  
  58.             out.write(jsonJavaStr);  
  59.               
  60.         } catch (Exception e) {  
  61.             e.printStackTrace();  
  62.         }  
  63.     }  
  64.       
  65.     public void cityToArea(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  66.         response.setContentType("text/html; charset=utf-8");  
  67.         PrintWriter out = response.getWriter();  
  68.           
  69.         List<Area> areas = null;  
  70.         //获取参数  
  71.         String cid = request.getParameter("cid");  
  72.         try {  
  73.               
  74.             areas = service.findAllAreaByProvince(cid);   
  75.               
  76.             //使用第三方工具类,将对象转成JSON格式的字符串  
  77.             JsonConfig config = new JsonConfig();  
  78.             //去掉不需要的参数  
  79.             config.setExcludes(new String[]{"id"});  
  80.             //将citys转换为json格式的字符串  
  81.             JSONArray jsonArray = JSONArray.fromObject(areas, config);  
  82.             String jsonJavaStr = jsonArray.toString();  
  83.               
  84.             //将字符串响应给ajax引擎  
  85.             out.write(jsonJavaStr);  
  86.               
  87.         } catch (Exception e) {  
  88.             e.printStackTrace();  
  89.         }  
  90.     }  
  91.   
  92. }  

service层代码:省略.....


DAO层代码:

[java] view plaincopy
  1. package kerwin.dao;  
  2.   
  3. import java.util.List;  
  4.   
  5. import org.apache.commons.dbutils.QueryRunner;  
  6. import org.apache.commons.dbutils.handlers.BeanListHandler;  
  7.   
  8. import kerwin.bean.Area;  
  9. import kerwin.bean.City;  
  10. import kerwin.utils.JdbcUtil;  
  11.   
  12. public class ProvinceCityAreaDao{  
  13.     public List<City> findAllCityByProvince(String pid)  throws Exception{  
  14.         List<City> citys = null;  
  15.         QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);  
  16.           
  17.         String sql = "select * from citys where pid = ?";  
  18.         Object params[]={pid};  
  19.           
  20.         citys = runner.query(sql, new BeanListHandler<City>(City.class), params);  
  21.           
  22.         return citys;  
  23.           
  24.     }  
  25.       
  26.       
  27.     public List<Area> findAllAreaByProvince(String cid)  throws Exception{  
  28.         List<Area> areas = null;  
  29.         QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);  
  30.           
  31.         String sql = "select * from area where cid = ?";  
  32.         Object params[]={cid};  
  33.           
  34.         areas = runner.query(sql, new BeanListHandler<Area>(Area.class), params);  
  35.           
  36.         return areas;  
  37.           
  38.     }  
  39.       
  40.       
  41. }  

还有三个province、city、area JavaBean类省略......


mysql连接使用c3p0连接池:

c3p0-config.xml:

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <c3p0-config>  
  3.     <default-config>  
  4.         <property name="driverClass">com.mysql.jdbc.Driver</property>  
  5.         <property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/ajax</property>  
  6.         <property name="user">root</property>  
  7.         <property name="password">root</property>  
  8.         <property name="acquireIncrement">2</property>  
  9.         <property name="initialPoolSize">5</property>  
  10.         <property name="minPoolSize">1</property>  
  11.         <property name="maxPoolSize">5</property>  
  12.     </default-config>  
  13. </c3p0-config>  

JdbcUtil.java:

[java] view plaincopy
  1. package kerwin.utils;  
  2.   
  3. import com.mchange.v2.c3p0.ComboPooledDataSource;  
  4.   
  5. public class JdbcUtil {  
  6.     public static ComboPooledDataSource dataSource = new ComboPooledDataSource();  
  7.   
  8.     public static ComboPooledDataSource getDataSource() {  
  9.         return dataSource;  
  10.     }  
  11.       
  12. }  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
0 0
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
0 0
Ajax和JSON完成二级菜单联动的功能
首先需要找好JSON的包哦,链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1  1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: 1 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8
1464 0
Ajax学习之------>Ajax和Json实现无限下拉框联动(上)
 init.jsp页面,直接跳转到InitShengServlet2这个servlet初始化省份  /**该servlet初始化完后跳转到list4.jsp*/InitShengServletInitShengServletpackage com.
719 0
jQuery封装Ajax,SpringMVC使用Ajax的配置
jQuery封装Ajax,SpringMVC使用Ajax的配置
0 0
JQuery Ajax实现三级联动
本文实例为大家分享了ajax实现三级联动的具体代码
0 0
+关注
聚优云惠
专业科普建站知识 ,让建站变得更简单。专注于WordPress和Java建站知识讲解,云服务器主机知识讲解,建站程序搭建和网站优化。 欢迎访问我的网站 :http://tencent.yundashi168.com
文章
问答
文章排行榜
最热
最新
相关电子书
更多
地图场景的LBS智能信息分发技术
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载