Ajax实现省市级联

Ajax实现省市级联案例

原生JS使用Ajax实现级联

• Maven的pom文件

  <dependencies>
          <!--jquery-->
          <dependency>
              <groupId>org.webjars</groupId>
              <artifactId>jquery</artifactId>
              <version>3.1.1</version>
          </dependency>
  
          <!--jackson-->
          <dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-core</artifactId>
              <version>2.9.6</version>
          </dependency>
          <dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-annotations</artifactId>
              <version>2.9.6</version>
          </dependency>
          <dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-databind</artifactId>
              <version>2.9.6</version>
          </dependency>
  
          <!--Dbutils工具-->
          <dependency>
              <groupId>commons-dbutils</groupId>
              <artifactId>commons-dbutils</artifactId>
              <version>1.7</version>
              <scope>compile</scope>
          </dependency>
  
          <!--数据库驱动-->
          <dependency>
              <groupId>mysql</groupId>
              <artifactId>mysql-connector-java</artifactId>
              <version>8.0.19</version>
          </dependency>
  
          <!--数据库连接池-->
          <dependency>
              <groupId>com.alibaba</groupId>
              <artifactId>druid</artifactId>
              <version>1.1.8</version>
          </dependency>
  		
  		<!--servlet-->
          <dependency>
              <groupId>javax.servlet</groupId>
              <artifactId>javax.servlet-api</artifactId>
              <version>4.0.1</version>
              <scope>provided</scope>
          </dependency>
  </dependencies>

• Druid连接池的配置文件

  url=jdbc:mysql://localhost:3306/city?
  	serverTimezone=GMT&useSSL=false&characterEncoding=utf-8
  #这个可以缺省的，会根据url自动识别
  driverClassName=com.mysql.cj.jdbc.Driver
  username=root
  password=123765
  
  ##初始连接数，默认0
  initialSize=10
  #最大连接数，默认8
  maxActive=30
  #最小闲置数
  minIdle=10
  #获取连接的最大等待时间，单位毫秒
  maxWait=2000
  #缓存PreparedStatement，默认false
  poolPreparedStatements=true
  #缓存PreparedStatement的最大数量，默认-1（不缓存）。大于0时会自动开启缓存
  	PreparedStatement，所以可以省略上一句设置
  maxOpenPreparedStatements=20

• Linkage

  public class Linkage {
      private Integer id;
      private String name;
  
      public Linkage() {
      }
      ...略略略
  }

• LinkageServlet

  @WebServlet("/linkage")
  public class LinkageServlet extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
      	throws ServletException, IOException {
          Properties properties = new Properties();
          InputStream stream = LinkageServlet.class.getClassLoader().
          	getResourceAsStream("/druid.properties");
          properties.load(stream);
          try {
              DataSource dataSource = 
              	DruidDataSourceFactory.createDataSource(properties);
              //Druid工具
              QueryRunner queryRunner = new QueryRunner(dataSource);
              String pid = req.getParameter("pid");
              String sql;
              ObjectMapper mapper = new ObjectMapper();
              if (pid==null){
                  sql="select id,name from province";
                  List<Linkage> provincesList = queryRunner.query(sql, 
                  	new BeanListHandler<Linkage>(Linkage.class));
                  HashMap<String, Object> map = new HashMap<>();
                  map.put("data",provincesList);
                  map.put("result","成功");
                  String s = mapper.writeValueAsString(map);
                  System.out.println(s);
                  resp.setContentType("application/json;charset=utf-8");
                  resp.getWriter().write(s);
  
              }else {
                  sql="select id,name from town where p_id="+pid;
                  System.out.println("pid:"+pid);
                  List<Linkage> cityList = queryRunner.query(sql, 
                  	new BeanListHandler<Linkage>(Linkage.class));
                  Map<String,Object> map = new HashMap<>();
                  map.put("data",cityList);
                  resp.setContentType("application/json;charset=utf-8");
                  resp.getWriter().write(mapper.writeValueAsString(map));
              }
          } catch (Exception e) {
              e.printStackTrace();
          }
      }
  }

• index.jsp(与Jquery的不同处)

  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <html>
  <head>
      <title>省市联动</title>
  </head>
  <body>
      <select id="province"></select>
      <span id="city"></span>
      <script>
          //js程序入口
          window.onload=function () {
              //ajax请求省份信息
              ajax.get("http://localhost:8080/AJAXDemo/linkage",findProvince);
              let province = document.getElementById("province");
              province.onchange=function () {
                  alert(province.value)
                  //当select被选中时，获取其值，并使用ajax请求获取城市信息
                  ajax.get("http://localhost:8080/AJAXDemo/linkage" +
                      "?_="+new Date().getTime()+"&pid="+
                           province.value,findCity);
              }
          }
  
          //自定义的ajax对象，封装了get请求
          var ajax={
              get:function (url,callback) {
                  let xmlHttpRequest
                  //如果是IE5,IE6则通过new ActiveXObject创建xmlHttpRequest对象
                  if (window.XMLHttpRequest){
                      xmlHttpRequest = new XMLHttpRequest();
                  }else {
                      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP")
                  }
                  xmlHttpRequest.onreadystatechange=function () {
                      if (xmlHttpRequest.readyState==4
                          &&xmlHttpRequest.status==200){
                          callback(JSON.parse(xmlHttpRequest.responseText))
                      }
                  }
                  xmlHttpRequest.open("GET",url,true)
                  xmlHttpRequest.send()
              }
          }
  
          //省份的回调函数
          function findProvince(object) {
              let province = document.getElementById("province");
              let option = document.createElement("option");
              option.innerText="请选择省份"
              province.appendChild(option)
              for(var s of object.data){
                  let option = document.createElement("option");
                  option.value=s.id;
                  option.innerText=s.name;
                  province.appendChild(option)
              }
          }
  
          //城市的回调函数
          function findCity(object) {
              let city = document.getElementById("city");
              let select = document.createElement("select");
              let option = document.createElement("option");
              option.innerText="请选择地级市"
              select.appendChild(option)
              for(var s of object.data){
                  let option = document.createElement("option");
                  option.value=s.id;
                  option.innerText=s.name;
                  select.appendChild(option)
              }
              city.appendChild(select)
          }
      </script>
  </body>
  </html>

Jquery使用Ajax实现级联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的ajax技术实现省市联动</title>
</head>
<body>
    <select id="sel"></select>
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            $.get("http://localhost:8080/AJAXDemo/linkage",function (obj) {
                let arr = obj.data;
                $("#sel").append("<option>请选择省份</option>")
                for (var o of arr){
                    let option = $("<option></option>")
                    option.html(o.name)
                    option.attr("id",o.id)
                    $("#sel").append(option)
                }
            })
            $("#sel").change(function () {
                //查找select中被选中项的id
                let id = $("#sel").find("option:selected").attr("id")
                $.get("http://localhost:8080/AJAXDemo/linkage",{"pid":id},
                function (obj) {
                    let select = $("<select></select>");
                    let arr = obj.data;
                    select.append("<option>请选择城市</option>")
                    for (var o of arr){
                        let option = $("<option></option>");
                        option.attr("id",o.id)
                        option.html(o.name)
                        select.append(option)
                    }
                    $("body").append(select)
                })
            })
        })
    </script>
</body>
</html>

• 注意：在Maven中使用Jquery需要配置一下，大神文章
  • 设置仓库
  • 在resource目录下创建webjars，不存放任何东西
  • 在html中插入:<script src="webjars/jquery/3.1.1/jquery.min.js"></script>