码迷,mamicode.com
首页 > Web开发 > 详细

Ajax无刷新(二)三级联动

时间:2019-09-04 18:49:51      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:list   man   mave   selected   tar   beanutils   ati   名称   rop   

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无刷新(二)三级联动

标签:list   man   mave   selected   tar   beanutils   ati   名称   rop   

原文地址:https://www.cnblogs.com/in-the-game-of-thrones/p/11460783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!