JQuery实现省市二级联动_jquery省市二级动态联动-CSDN博客

该博客介绍了如何利用JQuery技术实现省市二级联动的效果，包括Dao实现类的设计，CityBean和ProvinceBean的数据结构，Service服务的实现以及省、市Servlet的处理逻辑，最后在JSP页面上展示联动效果。

Dao实现类

package com.bruce.dao;

import com.bruce.domain.City;
import com.bruce.domain.Province;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import utils.JDBCUtil;

import java.sql.SQLException;
import java.util.List;

public class CityDaoImpl implements CityDao {

    @Override
    public List<City> findCity(int pid) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtil.getDataSource());

        String sql = "SELECT * FROM CITY WHERE pid=?";


        return queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);
    }

    @Override
    public List<Province> finProvince() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtil.getDataSource());

        String sql = "SELECT * FROM PROVINCE";

        return queryRunner.query(sql, new BeanListHandler<Province>(Province.class));

    }
}

CityBean

package com.bruce.domain;

public class City {
    private int id;
    private String cname;
    private int pid;

    public City() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    @Override
    public String toString() {
        return "City{" +
                "id=" + id +
                ", cname='" + cname + '\'' +
                ", pid=" + pid +
                '}';
    }
}

ProvinceBean

package com.bruce.domain;

public class Province {
    private int pid;
    private String province;

    public Province() {
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    @Override
    public String toString() {
        return "Province{" +
                "pid=" + pid +
                ", province='" + province + '\'' +
                '}';
    }
}

Service实现

package com.bruce.service;

import com.bruce.dao.CityDao;
import com.bruce.dao.CityDaoImpl;
import com.bruce.domain.City;
import com.bruce.domain.Province;

import java.sql.SQLException;
import java.util.List;

public class CityServiceImpl implements CityService {

    @Override
    public List<City> findCity(int pid) throws SQLException {
        CityDao cityDao = new CityDaoImpl();

        return cityDao.findCity(pid);
    }

    @Override
    public List<Province> finProvince() throws SQLException {
        CityDao cityDao = new CityDaoImpl();

        return cityDao.finProvince();

    }
}

省Servlet

package com.bruce.servlet;

import com.bruce.domain.Province;
import com.bruce.service.CityService;
import com.bruce.service.CityServiceImpl;
import net.sf.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet(name = "ProServlet",urlPatterns = {"/ProServlet"})
public class ProServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");


        try {
            CityService cityService = new CityServiceImpl();
            List<Province> list = cityService.finProvince();
            request.setAttribute("list",list);
            request.getRequestDispatcher("index.jsp").forward(request,response);
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
}

市Servlet

package com.bruce.servlet;

import com.bruce.domain.City;
import com.bruce.domain.Province;
import com.bruce.service.CityService;
import com.bruce.service.CityServiceImpl;
import net.sf.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet(name = "FindServlet",urlPatterns = {"/FindServlet"})
public class FindServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        try {
            CityService cityService = new CityServiceImpl();


            int pid = Integer.parseInt(request.getParameter("pid"));

            List<City> cities = cityService.findCity(pid);
            JSONArray jsonArray = JSONArray.fromObject(cities);
            String json = jsonArray.toString();
            response.getWriter().write(json);

        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//            doPost(request,response);
    }
}

JSP

<%--
  Created by IntelliJ IDEA.
  User: SuperMAX
  Date: 2019/1/29
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <title>省市联动Demo页面</title>
    <script type="text/javascript">
        $(function() {

            //1。找到省份的元素
            $("#province").change(function() {
                //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
                //$("#province").varl();
                var pid = $(this).val();

                $.post( "FindServlet",{pid:pid} ,function(data,status){
                    //先清空
                    $("#city").html("<option value='' >-请选择-");
                    //再遍历，追加
                    $(data).each(function(index , c) {
                        $("#city").append("<option value='"+c.id+"' >"+c.cname);
                    });
                },"json" );

            });
        });
    </script>
  </head>
  <body>
  <center>
    <h1>省市联动Demo</h1>

      省份: <select name="province" id ="province">
      <option value="" >-请选择 -
        <c:forEach var="p" items="${ list }">
          <option value="${ p.pid }">${ p.province }</option>
         </c:forEach>
        <%--<option value="1" >广东--%>
        <%--<option value="2" >湖南--%>
        <%--<option value="3" >海南--%>
    </select>
      城市:
      <select name="city" id="city">
        <option value="" >-请选择 -
      </select>

  </center>





  </body>
</html>