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>

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

时间： 2024-10-10 21:17:30

Ajax无刷新（二）三级联动的相关文章

ajax练习习题二三级联动

异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发送下一个 2ajax 在调用处理页面数据的时候,下面的代码不能执行,只有当ajax完全执行完之后,才能继续执行下面代码 Async :false 关闭异步,开启同步 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经经常使用到,希望能给须要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完毕效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用.须要引

Ajax无刷新提交表单和显示

ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

struts2+jquery 实现ajax无刷新更新数据

前几天为了实现一个struts 的 ajax无刷新更新数据的例子,发现网上资料很少,很多已经过时或者链接都失效了 不过整合他们的资料,加上自己的研究,终于实现了效果 要求:1.各个学院提交学生数据到服务器,要求ajax 无刷新更新数据, 2.服务器端返回"更新成功"的提示窗口: 3.之后,使用jquery 更新input输入框的value值,为实现jquery 打印页面局部数据做准备. 此处使用struts2的第二种方法,(修改struts 配置文件,增加ajax package 的方

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

多级联动系列——ajax调用XML实现三级联动

ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml version="1.0" encoding="UTF-8"? > <list> <province name="河南" id='1'> <city name="焦作" id='11'>

DWZ框架Ajax无刷新表单提交处理流程

DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应的处理 注意: DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转). 表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单

ajax无刷新表单提交

ajax无刷新提交笔记 数据库自己模拟建一个 执行一下添加功能 php部分采用pdo方法: <?php $db ='mysql'; $host ='localhost'; $port ='3306'; $dbname = 'ajax'; $user = 'root'; $pwd  = ''; $dsn = "$db:host=$host;port=$port;dbname=$dbname";    //设定字符集  $options = array(PDO::MYSQL_ATTR