1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 技术杂谈

【JavaWeb-jQuery】网站 – 应用 Ajax，jQuery 实现级联查询

• 技术杂谈 • 阅读 76

网站功能：

  • 网页打开的时候，自动加载省份信息，用户通过选择不同的省份列表值，对应的城市信息也随之变化。

网站结构：

网站预览：

建表语句：

CREATE TABLE pro (
    id int NOT NULL AUTO_INCREMENT,
    name varchar(255) DEFAULT NULL,
    jiancheng varchar(255) DEFAULT NULL,
    shenghui varchar(255) DEFAULT NULL,
    PRIMARY KEY (id)
);

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

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)
);

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');

index.jsp（网站欢迎资源文件）：

<%@ page contenttype="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>&#x7701;&#x5E02;&#x7EA7;&#x8054;&#x67E5;&#x8BE2;</title>

    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        //自定义函数，用于加载省份数据
        function getData() {
            $.ajax({
                url: "queryProvince",
                dataType: "json",
                success: function (resp) {
                    //删除旧的省份select子对象
                    $("#province").empty();
                    //保留"--请选择--"子对象
                    $("#province").append("<option value=''>" + "--请选择--" + "</option>");
                    //将省份名称打到省份select上
                    $.each(resp, function (i, n) {
                        $("#province").append("<option value='" + n.provinceId + "'>" + n.provinceName + "</option>");
                    });
                }
            });
        }

        //自定义函数，用于处理服务端返回的数据
        function callBack(resp) {
            //清空旧的省份列表子对象
            $("#city").empty();
            $.each(resp,function (i, n) {
                $("#city").append("<option value '" + n.cityId + "'>" + n.cityName + "</option>");
            });
        }

        $(function () {
            //加载省份信息
            getData();

            //省份列表选中值改变时，调用的方法：
            $("#province").change(function () {
                //获取已被选中的列表值
                var id = $("#province>option:selected").val();
                //以 get 方式向服务端发送请求
                $.get("queryCity", {provinceId: id}, callBack, "json");

            });

        })

    </script>
</head>
<body>
<p>&#x7701;&#x5E02;&#x7EA7;&#x8054;&#x67E5;&#x8BE2;&#xFF0C;&#x4F7F;&#x7528; Ajax&#xFF0C;jQuery</p>
<table border="1px">
    <tr>
        <td>&#x7701;&#x4EFD;&#xFF1A;</td>
        <td>
            <select id="province">
                <option value>--&#x8BF7;&#x9009;&#x62E9;--</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>&#x57CE;&#x5E02;&#xFF1A;</td>
        <td>
            <select id="city">
                <option value>--&#x8BF7;&#x9009;&#x62E9;--</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html></%@>

com.burnyouth.util.JdbcUtil（JDBC工具类）：

package com.burnyouth.util;

import java.sql.*;

public class JdbcUtil {
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    private JdbcUtil() {
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection("jdbc:mysql://localhost:3306/burning_youth"
                , "root", "888");
    }

    public static void close(Connection connection, Statement statement, ResultSet resultSet) {
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (statement != null) {
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

com.burnyouth.entity.Province（省份实体类）：

package com.burnyouth.entity;

public class Province {
    private Integer provinceId;
    private String provinceName;

    public Province() {
    }

    public Integer getProvinceId() {
        return provinceId;
    }

    public void setProvinceId(Integer provinceId) {
        this.provinceId = provinceId;
    }

    public String getProvinceName() {
        return provinceName;
    }

    public void setProvinceName(String provinceName) {
        this.provinceName = provinceName;
    }
}

com.burnyouth.entity.City（城市实体类）：

package com.burnyouth.entity;

public class Province {
    private Integer provinceId;
    private String provinceName;
    private String jianCheng;
    private String shengHui;

    public Province() {
    }

    public Province(Integer provinceId, String provinceName, String jianCheng, String shengHui) {
        this.provinceId = provinceId;
        this.provinceName = provinceName;
        this.jianCheng = jianCheng;
        this.shengHui = shengHui;
    }

    public Integer getProvinceId() {
        return provinceId;
    }

    public void setProvinceId(Integer provinceId) {
        this.provinceId = provinceId;
    }

    public String getProvinceName() {
        return provinceName;
    }

    public void setProvinceName(String provinceName) {
        this.provinceName = provinceName;
    }

    public String getJianCheng() {
        return jianCheng;
    }

    public void setJianCheng(String jianCheng) {
        this.jianCheng = jianCheng;
    }

    public String getShengHui() {
        return shengHui;
    }

    public void setShengHui(String shengHui) {
        this.shengHui = shengHui;
    }
}

com.burnyouth.dao.QueryProvinceDao（连接数据库，进行查询操作并返回数据）：

package com.burnyouth.dao;

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

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

public class QueryProvinceDao {
    //&#x67E5;&#x8BE2;&#x6570;&#x636E;&#x4E2D;&#x6240;&#x6709;&#x7701;&#x4EFD;
    public List<province> queryProvince(){
        Connection connection = null;
        PreparedStatement ps = null;
        ResultSet resultSet = null;
        List<province> provinces = new ArrayList<>();
        try {
            connection = JdbcUtil.getConnection();
            //&#x6309;&#x7167;id&#x5347;&#x5E8F;&#x8F93;&#x51FA;
            String sql = "select * from pro order by id";
            ps = connection.prepareStatement(sql);
            resultSet = ps.executeQuery();
            while (resultSet.next()) {
                Province province = new Province();
                province.setProvinceId(resultSet.getInt("id"));
                province.setProvinceName(resultSet.getString("name"));
                provinces.add(province);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JdbcUtil.close(connection,ps,resultSet);
        }
        return provinces;

    }

    //&#x67E5;&#x8BE2;&#x7701;&#x4EFD;&#x5BF9;&#x5E94;&#x7684;&#x6240;&#x6709;&#x57CE;&#x5E02;
    public List<city> queryCity(Integer provinceId){
        Connection connection = null;
        PreparedStatement ps = null;
        ResultSet resultSet = null;
        City city = null;
        List<city> citys = new ArrayList<>();
        try {
            connection = JdbcUtil.getConnection();
            String sql = "select * from city where provinceid=?";
            ps = connection.prepareStatement(sql);
            ps.setInt(1,provinceId);
            resultSet = ps.executeQuery();
            while (resultSet.next()) {
                city = new City();
                city.setCityId(resultSet.getInt("id"));
                city.setCityName(resultSet.getString("name"));
                citys.add(city);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JdbcUtil.close(connection,ps,resultSet);
        }
        return citys;

    }
}</city></city></province></province>

xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" version="5.0">
    <servlet>
        <servlet-name>QueryProvinceServlet</servlet-name>
        <servlet-class>com.burnyouth.controller.QueryProvinceServlet</servlet-class>
    </servlet>
    <servlet>
        <servlet-name>QueryCityServlet</servlet-name>
        <servlet-class>com.burnyouth.controller.QueryCityServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>QueryProvinceServlet</servlet-name>
        <url-pattern>/queryProvince</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>QueryCityServlet</servlet-name>
        <url-pattern>/queryCity</url-pattern>
    </servlet-mapping>

    <!--设置一下欢迎资源文件-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

com.burnyouth.controller.QueryProvinceServlet（返回 json 格式的省份信息）：

package com.burnyouth.controller;

import com.burnyouth.dao.QueryProvinceDao;
import com.burnyouth.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.*;
import jakarta.servlet.http.*;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

public class QueryProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "";
        QueryProvinceDao dao = new QueryProvinceDao();
        List<province> provinces = new ArrayList<>();
        PrintWriter out = null;

        provinces = dao.queryProvince();
        //&#x5C06;list&#x8F6C;&#x4E3A;json&#x683C;&#x5F0F;&#x7684;&#x5B57;&#x7B26;&#x4E32;
        if (provinces != null) {
            //&#x8C03;&#x7528;Jackson&#x5DE5;&#x5177;&#x5E93;&#xFF0C;&#x5B9E;&#x73B0;List ---> json
            ObjectMapper objectMapper = new ObjectMapper();
            json = objectMapper.writeValueAsString(provinces);
        }

        //&#x4F7F;&#x5BA2;&#x6237;&#x7AEF;&#x6D4F;&#x89C8;&#x5668;&#x4F7F;&#x7528;&#x6B63;&#x786E;&#x7684;&#x7F16;&#x8F91;&#x5668;&#x89E3;&#x8BFB;&#x6570;&#x636E;
        response.setContentType("application/json;charset=utf-8");
        out = response.getWriter();
        //&#x8F93;&#x51FA;json&#x6570;&#x636E;
        out.write(json);
        out.flush();
        out.close();
    }
}</province>

com.burnyouth.controller.QueryCityServlet（根据客户端发送过来的省份 id ，返回对应的城市信息【json 格式】）：

package com.burnyouth.controller;

import com.burnyouth.dao.QueryProvinceDao;
import com.burnyouth.entity.City;
import com.burnyouth.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.*;
import jakarta.servlet.http.*;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

public class QueryCityServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "";
        //&#x83B7;&#x53D6;&#x7701;&#x4EFD;id
        String provinceId = request.getParameter("provinceId");
        QueryProvinceDao dao = new QueryProvinceDao();
        List<city> cities = new ArrayList<>();
        PrintWriter out = null;

        cities = dao.queryCity(Integer.valueOf(provinceId));
        //&#x5C06;list&#x8F6C;&#x4E3A;json&#x683C;&#x5F0F;&#x7684;&#x5B57;&#x7B26;&#x4E32;
        if (provinceId != null && !"".equals(provinceId.trim())) {
            //&#x8C03;&#x7528;Jackson&#x5DE5;&#x5177;&#x5E93;&#xFF0C;&#x5B9E;&#x73B0;List ---> json
            ObjectMapper objectMapper = new ObjectMapper();
            json = objectMapper.writeValueAsString(cities);
        }

        response.setContentType("application/json;charset=utf-8");
        out = response.getWriter();
        //&#x8F93;&#x51FA;json&#x6570;&#x636E;
        out.write(json);
        out.flush();
        out.close();
    }
}
</city>

Original: https://www.cnblogs.com/Burning-youth/p/16086502.html
Author: 猿头猿脑的王狗蛋
Title: 【JavaWeb-jQuery】网站 – 应用 Ajax，jQuery 实现级联查询

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/683407/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球