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无刷新用户列表CRUD