前端学习笔记：省市区三级联动
一、数据库
sql表是自关联的表。
表名：province_city_district 字段： id：区域自身的id pid：区域的父级id name：区域自身的名字
二、搭工程 1. 创建工程：Create New Project-->Empty Project, Project name=exercises01, Finish 2. 创建项目：New-->Module-->Java Enterprise, Java EE version=Java EE 6, Additional Libraries and Frameworks=Web Application(3.0), Versions=3.0, 选中Create web.xml-->Next, Module name=exercise01 3. 在src文件夹下建立层级 数据库层：com.itcast.dao 数据封装：com.itcast.domain 业务层：com.itcast.service servlet包：com.itcast.servlet 工具包：com.itcast.utils 4. 导入jar包 在web/WEB-INF文件夹下建立文件夹lib，将jar包放入lib文件夹下，所需要的jar包有： c3p0的：c3p0-0.9.2-pre5.jar, mchange-commons-java-0.2.3.jar。 c3p0-config.xml文件则放入src文件夹下。 mysql驱动：mysql-connector-java-5.1.39-bin.jar dbcp的：commons-dbcp-1.4.jar, commons-pool-1.6.jar dbutils的：commons-dbutils-1.4.jar json的：flexjson-3.3.jar 5.导入jquery包 在web文件夹下创建文件夹js，在js中放入jquery的文件，文件名为：jquery-1.11.3.min.js 6.配置tomcat (1)Run-->Edit Configuration, 点击+，选Tomcat Server-->Local (2)Name=tomcat8, 在Server标签页中，点击Configure按钮，Tomcat Home选择tomcat的安装目录，libraries选择tomcat安装目录下的lib文件夹，加入jsp-api.jar和servlet-api.jar (3)在Deployment标签页中，Application context=/项目名称，即：Application context=/exercise01
三、核心代码：
//file name:area.jsp, directory: [Project name]/web/area.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省市区三级联动</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> //页面加载事件 $(function(){ //1. 加载省的信息 $.ajax({ type: "post", url: "${pageContext.request.contextPath}/pcdListServlet", data: "pid=-1", success: function(data){ //console.info(data); //1.1 定义变量，记录所有的省的信息 var str = "<option value='null'>---请选择省---</option>"; //1.2 遍历，获取到每一个省的信息，然后拼接 for(var i=0; i<data.length; i++){ str += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"; } //1.3 将记录所有省的信息的变量，填充到指定的下拉列表中 $("#province").html(str); } }); //2.省变化的时候，加载市的信息 $("#province").change(function(){ //细节：清除市、县区信息 $("#city").html("<option value='null'>---请选择市---</option>"); $("#district").html("<option value='null'>---请选择县区---</option>"); $.ajax({ type: "post", url: "${pageContext.request.contextPath}/pcdListServlet", data: "pid=" + this.value, success: function(data){ //console.info(data); //1.1 定义变量，记录所有的市的信息 var str = "<option value='null'>---请选择市---</option>"; //1.2 遍历，获取到每一个市的信息，然后拼接 for(var i=0; i<data.length; i++){ str += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"; } //1.3 将记录所有市的信息的变量，填充到指定的下拉列表中 $("#city").html(str); } }); }); //3. 市变化的时候，加载县区的信息 $("#city").change(function(){ $.ajax({ type: "post", url: "${pageContext.request.contextPath}/pcdListServlet", data: "pid=" + this.value, success: function(data){ //console.info(data); //1.1 定义变量，记录所有的县区的信息 var str = "<option value='null'>---请选择县区---</option>"; //1.2 遍历，获取到每一个县区的信息，然后拼接 for(var i=0; i<data.length; i++){ str += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"; } //1.3 将记录所有县区的信息的变量，填充到指定的下拉列表中 $("#district").html(str); } }); }); }); </script> </head> <body> <select id="province"> <option value="null">---请选择省---</option> </select> <select id="city"> <option value="null">---请选择市---</option> </select> <select id="district"> <option value="null">---请选择县区---</option> </select> </body> </html>
全部代码和笔记已经以资源的形式上传到，搜索关键字为：省市三级联动_代码和笔记
链接为：https://download.csdn.net/download/elizabethxxy/11952616
