Web前端-jQuery实现Ajax实例-级联查询

1.需求

页面加载出来时，需要在第一个下拉列表中显示所有省份名称。

当用户选择其中一个省份，在第二个下拉列表中显示该省份所有的城市。

2.准备工作

2.1创建数据库与数据表

2.1.1创建数据库【db_ajax】

create database db_ajax;

2.1.2创建省份信息表【province】

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
    `simpleName` varchar(255) DEFAULT NULL COMMENT '简称',
    `proCap` varchar(255) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');

2.1.3创建城市信息表【city】

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(255) DEFAULT NULL,
    `provinceid` int(11) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

INSERT INTO `city` VALUES ('1', '石家庄市', '1');
INSERT INTO `city` VALUES ('2', '秦皇岛', '1');
INSERT INTO `city` VALUES ('3', '保定市', '1');
INSERT INTO `city` VALUES ('4', '张家口', '1');
INSERT INTO `city` VALUES ('5', '南昌市', '9');
INSERT INTO `city` VALUES ('6', '九江市', '9');
INSERT INTO `city` VALUES ('7', '宜春市', '9');
INSERT INTO `city` VALUES ('8', '福州市', '8');
INSERT INTO `city` VALUES ('9', '厦门市', '8');
INSERT INTO `city` VALUES ('10', '泉州市', '8');
INSERT INTO `city` VALUES ('11', '龙岩市', '8');
INSERT INTO `city` VALUES ('12', '太原', '2');
INSERT INTO `city` VALUES ('13', '大同', '2');
INSERT INTO `city` VALUES ('14', '呼和浩特', '3');
INSERT INTO `city` VALUES ('15', '包头', '3');
INSERT INTO `city` VALUES ('16', '呼伦贝尔', '3');

2.2创建Web工程

1.创建新的Module，选择Java Enterprise--->Web Application--->next

2.为Module命名

3.在/web/WEB-INF目录下新建lib文件夹，将数据库驱动、json工具包等jar包放进去

4.将lib目录下的jar包都添加到工程Library里

5.在web目录下新建一个文件夹，命名为js，将jQuery库放进去

2.3创建实体类

2.3.1省份信息表对应实体类

创建com.tsccg.entity.Province实体类

package com.tsccg.entity;

/**
 * @Author: TSCCG
 * @Date: 2021/09/2 15:30
 * 省份信息表province对应实体类
 */
public class Province {
    private Integer id;//省份编号
    private String name;//省份名称
    private String simpleName;//省份简称
    private String proCap;//省份的省会

    public Province() {
    }

    public Province(Integer id, String name, String simpleName, String proCap) {
        this.id = id;
        this.name = name;
        this.simpleName = simpleName;
        this.proCap = proCap;
    }

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSimpleName() {
        return simpleName;
    }

    public void setSimpleName(String simpleName) {
        this.simpleName = simpleName;
    }

    public String getProCap() {
        return proCap;
    }

    public void setProCap(String proCap) {
        this.proCap = proCap;
    }
}

2.3.2城市信息表对应实体类

package com.tsccg.entity;

/**
 * @Author: TSCCG
 * @Date: 2021/09/02 13:37
 * 城市信息表实体类
 */
public class City {
    private Integer cityId;//城市编号
    private String cityName;//城市名称
    private Integer proId;//省份编号

    public City() {
    }

    public City(Integer cityId, String cityName, Integer proId) {
        this.cityId = cityId;
        this.cityName = cityName;
        this.proId = proId;
    }

    public Integer getCityId() {
        return cityId;
    }

    public void setCityId(Integer cityId) {
        this.cityId = cityId;
    }

    public String getCityName() {
        return cityName;
    }

    public void setCityName(String cityName) {
        this.cityName = cityName;
    }

    public Integer getProId() {
        return proId;
    }

    public void setProId(Integer proId) {
        this.proId = proId;
    }
}

2.4封装JDBC工具类

配置文件：jdbc.properties

driverName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db_ajax
user=root
password=123456

工具类：JdbcUtil.java

package com.tsccg.util;

import java.sql.*;
import java.util.ResourceBundle;

/**
 * @Author: TSCCG
 * @Date: 2021/08/28 19:42
 * 封装工具类
 */
public class JdbcUtil {
    private static Connection conn = null;
    private static PreparedStatement ps = null;
    private static Statement stmt = null;

    private static String url = null;
    private static String user = null;
    private static String password = null;

    /**
     * 静态代码块，用于注册驱动及初始化各种参数
     */
    static {
        try {
            ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
            String driverName = bundle.getString("driverName");
            url = bundle.getString("url");
            user = bundle.getString("user");
            password = bundle.getString("password");
            //注册驱动
            Class.forName(driverName);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取连接
     * @return 返回Connection对象
     */
    public static Connection getConn() {
        try {
            conn = DriverManager.getConnection(url,user,password);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return conn;
    }

    /**
     * 获取预编译的数据库操作对象
     * @param sql sql语句
     * @return 返回PreparedStatement对象
     */
    public static PreparedStatement getPs(String sql) {
        try {
            ps = getConn().prepareStatement(sql);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return ps;
    }

    /**
     * 获取数据库操作对象
     * @return 返回Statement对象
     */
    public static Statement getStmt() {
        try {
            stmt = getConn().createStatement();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return stmt;
    }

    /**
     * 关闭所有
     * @param rs 查询结果集对象
     */
    public static void closeAll(ResultSet rs) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (stmt != null) {
            try {
                stmt.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}

3.流程说明

1.创建前端页面【levelSearch.jsp】，创建两个下拉列表，使用jQuery实现Ajax，发送请求访问Servlet索要所有省份信息

2.创建Dao类，编写方法获取所有省份信息

3.创建处理省份信息的Servlet类，调用Dao得到全部省份信息，转换成json格式字符串写入响应体

4.【levelSearch.jsp】接收到响应数据后更新省份下拉列表DOM对象

5.给省份下拉列表绑定change事件，当下拉列表的选项改变时，使用Ajax函数发送请求，携带省份编号向Servlet索要省份中所有的城市信息。

6.在Dao类里编写方法获取省份id对应所有城市信息

7.创建处理城市信息的Servlet类，调用Dao得到全部城市信息，转换成格式字符串写入响应体

8.【levelSearch.jsp】接收到响应数据后，更新城市下拉列表DOM对象

4.创建用户交互页面

创建levelSearch.jsp，编写页面

编写基本页面标签
使用jQuery实现Ajax
1. 发送请求
  - 当页面刚加载完时，使用Ajax函数发送请求，索要所有省份信息
  - 当省份下拉列表选项改变时，使用Ajax函数发送请求，携带被选中的省份id，索要所有城市信息
2. 接收响应数据
  - 调用empty函数清除下拉列表原有的子选项
  - 调用each函数遍历json对象
  - 每遍历一次，就给下拉列表添加一个子选项，设置value等于id，内容等于name

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>级联查询</title>
</head>
<style type="text/css">
    * {
        font-size: 20px;
    }
</style>
<%--<script type="text/javascript" src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>--%>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //定义加载省份信息函数
    function loadProList() {
        $("#proList").empty();//每次查询前，先清空原有子对象
        $.ajax({
            url:"findAllProList",
            dataType:"json",
            success:function(resp) {
                // alert(resp)//【测试语句】
                //resp=[{"id":1,"name":"河北","simpleName":"冀","proCap":"石家庄"},...]
                $.each(resp,function(index,element) {
                    // <option value=element.id>element.name</option>
                    $("#proList").append("<option value="+ element.id +">" + element.name + "</option>")
                })
            }

        })
    }
    $(function() {
        //当页面加载完毕时加载省份信息
        loadProList()
        //监听省份列表改变事件
        $("#proList").change(function() {
            // alert("发生change事件")//【测试】
            $("#cityList").empty();
            //获取当前被选中的省份编号
            var proId = $("#proList>option:selected").val();
            //调用Ajax函数
            $.get("findAllCityList",{"proId":proId},addCityOption,"json")
            // $.ajax({
            //     url:"findAllCityList",
            //     data:{"proId":proId},
            //     dataType:"json",
            //     success:function(resp) {
            //         $.each(resp,function(index,element) {
            //             $("#cityList").append("<option value="+ element.cityId +">" + element.cityName + "</option>");
            //         })
            //     }
            // })
        })
    })
    //定义添加城市选项函数
    function addCityOption(resp){
        $.each(resp,function(index,element) {
            // alert(resp)【测试】
            $("#cityList").append("<option value=" + element.cityId + ">" + element.cityName + "</option>")
        })
    }

</script>
<body>
<center>
    <font style="color: red;">省市级联查询</font>
    <table border="1" cellspacing="0" cellpadding="0">
        <!-- 省份下拉列表 -->
        <tr>
            <td>省份：</td>
            <td>
                <select id="proList">
                    <option>--请选择省份--</option>
                </select>
            </td>
        </tr>
        <!-- 城市下拉列表 -->
        <tr>
            <td>城市：</td>
            <td>
                <select id="cityList">
                    <option>--请选择城市--</option>
                </select>
            </td>
        </tr>
    </table>
</center>

</body>
</html>

5.编写Dao类

package com.tsccg.dao;

import com.tsccg.entity.City;
import com.tsccg.entity.Province;
import com.tsccg.util.JdbcUtil;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author: TSCCG
 * @Date: 2021/09/01 22:12
 */
public class ListFindDao {
    /**
     * 查询所有省份信息
     * @return 返回存有所有省份信息的List集合
     */
    public List<Province> findProList() {
        PreparedStatement ps = null;
        ResultSet rs = null;
        Province pro = null;
        List<Province> proList = new ArrayList<>();
        String sql = "select id,name,simpleName,proCap from province";
        try {
            ps = JdbcUtil.getPs(sql);
            rs = ps.executeQuery();
            while(rs.next()) {
                Integer id = rs.getInt("id");
                String name = rs.getString("name");
                String simpleName = rs.getString("simpleName");
                String proCap = rs.getString("proCap");
                //将本条省份信息添加到省份实体类对象中
                pro = new Province(id,name,simpleName,proCap);
                //将省份实体类对象添加到集合对象中
                proList.add(pro);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JdbcUtil.closeAll(rs);
        }
        //将集合对象返回
        return proList;
    }

    /**
     * 根据省份id查询所有城市信息
     * @param proId 省份id
     * @return 返回存有所有城市信息的List集合
     */
    public List<City> findCityList(Integer proId) {
        PreparedStatement ps = null;
        ResultSet rs = null;
        City city = null;
        List<City> cityList = new ArrayList<>();
        String sql = "select id,name,provinceid from city where provinceid = ?";
        try {
            ps = JdbcUtil.getPs(sql);
            ps.setInt(1,proId);
            rs = ps.executeQuery();
            while(rs.next()) {
                Integer id = rs.getInt("id");
                String name = rs.getString("name");
                //将本条城市信息添加到城市实体类对象中
                city = new City(id,name,proId);
                //将城市实体类对象添加到集合对象中
                cityList.add(city);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JdbcUtil.closeAll(rs);
        }
        //将集合对象返回
        return cityList;
    }
}

6.创建Servlet用于处理请求

6.1处理省份查询的Servlet

创建com.tsccg.controller.FindAllProListServlet，别称：findAllProList

package com.tsccg.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tsccg.dao.ListFindDao;
import com.tsccg.entity.Province;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @Author: TSCCG
 * @Date: 2021/09/01 22:09
 */
public class FindAllProListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String jsonStr = "{}";
        //1.调用Dao将查询信息推送到数据库服务器中，返回一个包含所有省份信息的List集合
        ListFindDao dao = new ListFindDao();
        List<Province> proList = dao.findProList();
        //2.将List集合转换为json格式字符串，通过输出流写入到响应体中
        ObjectMapper mapper = new ObjectMapper();
        jsonStr = mapper.writeValueAsString(proList);
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}

6.2处理城市查询的Servlet

创建com.tsccg.controller.FindAllCityListServlet，别称：findAllCityList

package com.tsccg.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tsccg.dao.ListFindDao;
import com.tsccg.entity.City;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @Author: TSCCG
 * @Date: 2021/09/02 13:55
 */
public class FindAllCityListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String jsonStr = "{}";
        //1.调用请求对象获取请求头的中的省份编号
        String proId = request.getParameter("proId");
        if (proId != null && proId.length() > 0) {
            //2.调用Dao将查询语句推送给数据库服务器，返回对应省份的所有城市信息
            ListFindDao dao = new ListFindDao();
            List<City> cityList = dao.findCityList(Integer.parseInt(proId));
            //3.将所有城市信息转换为json格式字符串，写入响应体中
            ObjectMapper mapper = new ObjectMapper();
            jsonStr = mapper.writeValueAsString(cityList);
        }
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}

7.测试

发布网站，开启服务器。

posted @ 2021-09-02 16:18 TSCCG 阅读(133) 评论(0) 编辑收藏举报

刷新页面返回顶部

TSCCG