Ajax无刷新三级联动
Posted in-the-game-of-thrones
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax无刷新三级联动相关的知识，希望对你有一定的参考价值。
1 写一个公用页面 2 <% 3 String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath(); 4 System.out.println(path); 5 request.setAttribute("path",path); 6 %>
1 其他页面需要绝对路径的话，就引用公用页面 2 <%-- 3 Created by IntelliJ IDEA. 4 User: Administrator 5 Date: 2019/9/3 6 Time: 14:41 7 To change this template use File | Settings | File Templates. 8 --%> 9 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 10 <%@include file="base.jsp"%> 11 <html> 12 <head> 13 <title>二级联动</title> 14 <link rel="stylesheet" href="$pageContext.request.contextPath/bootstrap/css/bootstrap.min.css" /> 15 <%--<link rel="stylesheet" href="$pageContext.request.contextPath/layer/layer/mobile/need/layer.css" />--%> 16 <script src="$pageContext.request.contextPath/bootstrap/js/jquery.min.js"></script> 17 <script src="$pageContext.request.contextPath/bootstrap/js/bootstrap.min.js"></script> 18 <%--<script src="$pageContext.request.contextPath/layer/layer/mobile/layer.js"></script>--%> 19 </head> 20 <body> 21 <div class="container"> 22 <div class=" panel panel-primary"> 23 <div class="panel-heading"> 24 <h1>省、市、(县/区) 三级联动</h1> 25 <h2 id="msg" style="color: yellow;"></h2> 26 </div> 27 <div class="panel-body"> 28 <form class="form-inline"> 29 省份： <select class="form-control" id="provice"> </select> 30 城市： <select class="form-control" id="city"> </select> 31 县城： <select class="form-control" id="county"> </select> 32 </form> 33 </div> 34 </div> 35 </div> 36 </body> 37 <script> 38 $(function() 39 loadProvice(); 40 ) 41 //加载所有的省份 42 function loadProvice() 43 alert("加载成功！！！"); 44 var psel_tag = "<option value=‘0‘ selected = ‘selected‘>请选择省份</option>"; 45 <%--$.get("$pageContext.request.contextPath/mycity?param=provice",function (data) --%> 46 $.get("$path/mycity?param=provice",function (data) 47 $(data).each(function (i,o) 48 psel_tag += "<option value=‘"+o.pid+"‘>"+o.pname+"</option>"; 49 ) 50 $("#provice").html(psel_tag); 51 ,"json"); 52 53 54 //绑定省与城市的下拉框效果 55 $("#provice").change(function(pid) 56 var pv = $("#provice").val(); 57 if (pv == null || pv == ‘‘ || pv == undefined || pv == 0) 58 $("#city").val(""); 59 $("#county").val(""); 60 return; 61 62 $.ajax(//注意这里的大括号 63 <%--url:"$pageContext.request.contextPath/mycity?param=pHASc",--%> 64 url:"$path/mycity?param=pHASc", 65 method:"GET", 66 data:"pid":$("#provice").val(),//这是参数， 67 dataType:"json", 68 success:function (data) 69 var tags = ""; 70 $(data).each(function (i,o) 71 tags += "<option value=‘"+o.cid+"‘>"+o.cname+"</option>"; 72 ); 73 $("#city").html(tags); 74 var val = $("#city").val(); 75 if (val != null || val != "" || val != undefined) 76 countyAscitychange(); 77 78 , 79 error:function () 80 alert("绑定失败"); 81 82 ) 83 ); 84 85 function countyAscitychange() 86 $.ajax( 87 <%--url:"$pageContext.request.contextPath/mycity?param=cHASy",--%> 88 url:"$path/mycity?param=cHASy", 89 method:"GET", 90 data:"cid":$("#city").val(), 91 dataType:"json", 92 success:function (data) 93 var couty_tag = ""; 94 $(data).each(function (i,o) 95 couty_tag += "<option value=‘"+o.xid+"‘>"+o.xname+"</option>"; 96 ); 97 $("#county").html(couty_tag); 98 , 99 error:function () 100 layer.msg("城市与县城绑定失败",icron:[6]); 101 102 ) 103 104 105 /** 106 * 使用ajax无刷新获取数据， 107 * 使用$.ajax（ 。。。。 ）方式 108 */ 109 $("#city").change(function () 110 countyAscitychange(); 111 ); 112 </script> 113 </html>
1 package erlian.dao; 2 3 import com.mchange.v2.c3p0.ComboPooledDataSource; 4 import erlian.model.City; 5 import erlian.model.County; 6 import erlian.model.Province; 7 import org.apache.commons.dbutils.QueryRunner; 8 import org.apache.commons.dbutils.handlers.BeanListHandler; 9 10 import java.sql.SQLException; 11 import java.util.List; 12 13 public class DemoDao 14 15 private ComboPooledDataSource dataSource = new ComboPooledDataSource("mysql"); 16 private QueryRunner runner = new QueryRunner(dataSource); 17 18 /** 19 * 查询所有的省份 20 * @return 21 */ 22 public List<Province> getAllProvince() 23 try 24 return runner.query("select * from t_province",new BeanListHandler<Province>(Province.class)); 25 catch (SQLException e) 26 e.printStackTrace(); 27 throw new RuntimeException("sql执行出错"); 28 29 30 31 32 33 34 /** 35 * 查询所有的城市 36 * @return 37 */ 38 public List<City> getAllCity() 39 try 40 return runner.query("select * from t_city",new BeanListHandler<City>(City.class)); 41 catch (SQLException e) 42 e.printStackTrace(); 43 throw new RuntimeException("sql执行出错"); 44 45 46 47 /** 48 * 根据省份id，得到城市 49 * @param pid 50 * @return 51 */ 52 public List<City> getAllCityByPid(int pid) 53 try 54 return runner.query("select * from t_city where pid = ?",new BeanListHandler<City>(City.class),pid); 55 catch (SQLException e) 56 e.printStackTrace(); 57 throw new RuntimeException("sql执行出错"); 58 59 60 61 /** 62 * 根据城市id，得到县城名称 63 * @param cid 64 * @return 65 */ 66 public List<County> getAllCountyByCid(int cid) 67 try 68 return runner.query("select * from t_county where cid = ?",new BeanListHandler<County>(County.class),cid); 69 catch (SQLException e) 70 e.printStackTrace(); 71 throw new RuntimeException("sql执行出错"); 72 73 74 75 public static void main(String[] args) 76 DemoDao demoDao = new DemoDao(); 77 78 for (Province city : demoDao.getAllProvince()) 79 System.out.println(city); 80 81 82 // demoDao.getAllCountyByCid(2).forEach(y-> System.out.println(y)); 83 84
1 package erlian.servlet; 2 3 4 import com.alibaba.fastjson.JSONObject; 5 import erlian.dao.DemoDao; 6 import erlian.model.City; 7 import erlian.model.County; 8 import erlian.model.Province; 9 10 import javax.servlet.ServletException; 11 import javax.servlet.annotation.WebServlet; 12 import javax.servlet.http.HttpServlet; 13 import javax.servlet.http.HttpServletRequest; 14 import javax.servlet.http.HttpServletResponse; 15 import java.io.IOException; 16 import java.io.PrintWriter; 17 import java.util.List; 18 19 @WebServlet("/mycity") 20 public class MyServlet extends HttpServlet 21 private DemoDao d = new DemoDao(); 22 23 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 24 doGet(request,response); 25 26 27 /** 28 * 根据参数调用对应的方法servlet 29 * @param request 30 * @param response 31 * @throws ServletException 32 * @throws IOException 33 */ 34 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 35 36 response.setContentType("text/json;charset=UTF-8"); 37 String param = request.getParameter("param"); 38 System.out.println(request.getContextPath()); 39 if (param.equals("provice")) 40 getP(request,response); 41 else if (param.equals("city")) 42 // getC(request,response); 43 else if("pHASc".equals(param)) 44 getCByPid(request,response); 45 else if ("cHASy".equals(param)) 46 getYByCid(request,response); 47 48 49 50 /** 51 * 根据城市id，关联所包含的县区数据 52 * @param request 53 * @param response 54 */ 55 private void getYByCid(HttpServletRequest request, HttpServletResponse response) throws IOException 56 String cid = request.getParameter("cid"); 57 PrintWriter writer = response.getWriter(); 58 List<County> allCountyByCid = d.getAllCountyByCid(Integer.parseInt(cid)); 59 //将数据用Json格式的给字符串打包 60 String s = JSONObject.toJSONString(allCountyByCid); 61 writer.write(s); 62 writer.close(); 63 64 65 /** 66 * 根据省id查询所包含的城市 67 * @param request 68 * @param response 69 * @throws IOException 70 */ 71 private void getCByPid(HttpServletRequest request, HttpServletResponse response) throws IOException 72 PrintWriter writer = response.getWriter(); 73 String pid = request.getParameter("pid"); 74 System.out.println(pid); 75 List<City> allCityByPid = d.getAllCityByPid(Integer.parseInt(pid)); 76 // allCityByPid.forEach(s-> System.out.println(s)); 77 String s = JSONObject.toJSONString(allCityByPid); 78 writer.write(s); 79 80 81 /** 82 * 查询所有的省城 83 * @param request 84 * @param response 85 * @throws IOException 86 */ 87 private void getP(HttpServletRequest request, HttpServletResponse response) throws IOException 88 PrintWriter writer = response.getWriter(); 89 List<Province> allProvince = d.getAllProvince(); 90 String s = JSONObject.toJSONString(allProvince); 91 writer.write(s); 92 93 94 // /** 95 // * 查询所有的城市 96 // * @param request 97 // * @param response 98 // * @throws IOException 99 // */ 100 // private void getC(HttpServletRequest request, HttpServletResponse response) throws IOException 101 // PrintWriter writer = response.getWriter(); 102 // List<City> allCity = d.getAllCity(); 103 // String s = JSONObject.toJSONString(allCity); 104 // writer.write(s); 105 // 106
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 5 http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" 6 version="4.0"> 7 </web-app>
1 <?xml version="1.0" encoding="UTF-8"?> 2 3 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 5 <modelVersion>4.0.0</modelVersion> 6 7 <groupId>cn.ajax</groupId> 8 <artifactId>demo2</artifactId> 9 <version>1.0-SNAPSHOT</version> 10 <packaging>war</packaging> 11 12 <name>demo2 Maven Webapp</name> 13 <!-- FIXME change it to the project‘s website --> 14 <url>http://www.example.com</url> 15 16 <properties> 17 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 18 <maven.compiler.source>1.8</maven.compiler.source> 19 <maven.compiler.target>1.8</maven.compiler.target> 20 </properties> 21 22 <dependencies> 23 <dependency> 24 <groupId>junit</groupId> 25 <artifactId>junit</artifactId> 26 <version>4.12</version> 27 <scope>test</scope> 28 </dependency> 29 30 <!--c3p0连接池相关--> 31 <dependency> 32 <groupId>com.mchange</groupId> 33 <artifactId>c3p0</artifactId> 34 <version>0.9.2.1</version> 35 </dependency> 36 37 <dependency> 38 <groupId>commons-dbutils</groupId> 39 <artifactId>commons-dbutils</artifactId> 40 <version>1.4</version> 41 </dependency> 42 43 <dependency> 44 <groupId>org.apache.commons</groupId> 45 <artifactId>commons-pool2</artifactId> 46 <version>2.3</version> 47 </dependency> 48 49 <dependency> 50 <groupId>commons-beanutils</groupId> 51 <artifactId>commons-beanutils</artifactId> 52 <version>1.6</version> 53 </dependency> 54 55 <!--mysql驱动依赖--> 56 <dependency> 57 <groupId>mysql</groupId> 58 <artifactId>mysql-connector-java</artifactId> 59 <version>5.1.40</version> 60 </dependency> 61 62 <dependency> 63 <groupId>javax.servlet</groupId> 64 <artifactId>javax.servlet-api</artifactId> 65 <version>3.1.0</version> 66 <scope>provided</scope> 67 </dependency> 68 69 <!--fastjson工具依赖--> 70 <dependency> 71 <groupId>com.alibaba</groupId> 72 <artifactId>fastjson</artifactId> 73 <version>1.2.49</version> 74 </dependency> 75 76 77 78 <!--jstl,标准标签库--> 79 <dependency> 80 <groupId>javax.servlet.jsp.jstl</groupId> 81 <artifactId>jstl-api</artifactId> 82 <version>1.2</version> 83 <!--排除有冲突的jar：servlet-api-2.5.jar--> 84 <exclusions> 85 <exclusion> 86 <groupId>javax.servlet</groupId> 87 <artifactId>servlet-api</artifactId> 88 </exclusion> 89 </exclusions> 90 </dependency> 91 92 93 <dependency> 94 <groupId>taglibs</groupId> 95 <artifactId>standard</artifactId> 96 <version>1.1.2</version> 97 </dependency> 98 <!--dom4j工具依赖--> 99 <dependency> 100 <groupId>dom4j</groupId> 101 <artifactId>dom4j</artifactId> 102 <version>1.6.1</version> 103 </dependency> 104 </dependencies> 105 106 <build> 107 <finalName>demo2</finalName> 108 <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --> 109 <plugins> 110 <plugin> 111 <artifactId>maven-clean-plugin</artifactId> 112 <version>3.1.0</version> 113 </plugin> 114 <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --> 115 <plugin> 116 <artifactId>maven-resources-plugin</artifactId> 117 <version>3.0.2</version> 118 </plugin> 119 <plugin> 120 <artifactId>maven-compiler-plugin</artifactId> 121 <version>3.8.0</version> 122 </plugin> 123 <plugin> 124 <artifactId>maven-surefire-plugin</artifactId> 125 <version>2.22.1</version> 126 </plugin> 127 <plugin> 128 <artifactId>maven-war-plugin</artifactId> 129 <version>3.2.2</version> 130 </plugin> 131 <plugin> 132 <artifactId>maven-install-plugin</artifactId> 133 <version>2.5.2</version> 134 </plugin> 135 <plugin> 136 <artifactId>maven-deploy-plugin</artifactId> 137 <version>2.8.2</version> 138 </plugin> 139 </plugins> 140 </pluginManagement> 141 </build> 142 </project>
以上是关于Ajax无刷新三级联动的主要内容，如果未能解决你的问题，请参考以下文章
javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）