jquery-210813-02---jquery实现ajax&级联查询

最新推荐文章于 2023-11-17 15:10:30 发布

白光一

最新推荐文章于 2023-11-17 15:10:30 发布

阅读量186

点赞数

分类专栏： jquery 文章标签： jquery

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/119683781

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jquery-210813-02—jquery实现ajax&级联查询

index.jsp（主界面，发起ajax请求）
ProvinceDao.java（查找所有的Province）
ProvinceServlet.java（响应ajax请求，返回一个json类型Province数组）
CascadeFindDao.java（根据Province的id获取所有的City）
CascadeFindServlet.java（响应ajax请求，返回一个json类型City数组）
web.xml（servlet映射关系）
Province.java（实体类）
City.java（实体类）
数据库结构

index.jsp（主界面，发起ajax请求）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>级联查询</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        // 查询Province，封装成一个函数，实现可重用
        function loadDataProvince(){
            $.ajax({
                url:"provinceServlet",
                dataType:"json",
                success:function (resp){
                    $(resp).each(function (i,n){
                        $("#province").append("<option value=" + n.id+ ">" + n.name + "</option>");
                    })
                }
            })
        }

        // 查询City，封装成一个函数，实现可重用
        function callback(resp){
            $.each(resp,function (i,n){
                $("#city").append("<option value=" + n.id+ ">" + n.name + "</option>");
            })
        }

        $(function (){

            // 页面加载成功后立即执行，发起ajax请求
            // 加载Province数据
            loadDataProvince();

            // 点击按钮执行
            // 加载Province数据
            $("#btnFind").click(function (){
                // 删除旧数据
                $("#province").empty();
                $("#city").empty();
                $("#province").append("<option value=01>请选择</option>");
                $("#city").append("<option value=01>请选择</option>");

                // 加载Province数据
                loadDataProvince();
            })

            // 给省份的select绑定一个change事件，
            // 当select内容发生变化时，触发事件
            $("#province").change(function (){

                var proId = $("#province>option:selected").val();

                // 删除旧数据
                $("#city").empty();

                // get方式
                $.get({
                    url: "cascadeFindServlet",
                    data:{
                        "proid":proId
                    },
                    dataType: "json",
                    success:callback
                })

                // post方式
                // $.post("cascadeFindServlet",{proid: proId},function (resp){
                //     $.each(resp,function (i,n){
                //         $("#city").append("<option value=" + n.id+ ">" + n.name + "</option>");
                //     })
                // },"json");
            })
        })
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>
                    省份名称
                </td>
                <td>
                    <select id="province">
                        <option value="0">请选择</option>
                    </select>
                </td>
                <td>
                    <input type="button" id="btnFind" value="搜索城市"/>
                </td>
            </tr>
            <tr>
                <td>
                    城市名称
                </td>
                <td>
                    <select id="city">
                        <option value="0">请选择</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

ProvinceDao.java（查找所有的Province）

package com.bgy.dao;

import com.bgy.entity.Province;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ProvinceDao {

    // 获取省份名称
    public List<Province> queryProvinceList(){

        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "";
        String url = "jdbc:mysql://localhost:3306/springdb?&useSSL=false&serverTimezone=UTC";
        String username = "root";
        String password = "admin";

        List<Province> list = new ArrayList<>();
        Province province = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);

            sql = "select id,name,jiancheng,shenghui from province";
            pst = conn.prepareStatement(sql);
            rs = pst.executeQuery();

            while (rs.next()) {
                province = new Province();
                province.setId(rs.getInt("id"));
                province.setName(rs.getString("name"));
                province.setJiancheng(rs.getString("jiancheng"));
                province.setShenghui(rs.getString("shenghui"));
                list.add(province);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            }  catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return list;
    }
}

ProvinceServlet.java（响应ajax请求，返回一个json类型Province数组）

package com.bgy.controller;

import com.bgy.dao.ProvinceDao;
import com.bgy.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String json = "{}";
        ProvinceDao dao = new ProvinceDao();
        List<Province> provinces = dao.queryProvinceList();

        // 把 Provinces 转为json格式，输出给ajax请求
        if (provinces != null){
            // 使用jackson工具库
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(provinces);
        }

        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.println(json);
        writer.flush();
        writer.close();

    }
}

CascadeFindDao.java（根据Province的id获取所有的City）

package com.bgy.dao;

import com.bgy.entity.City;
import com.bgy.entity.Province;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class CascadeFindDao {

    // 根据省份名称获取城市
    public List<City> queryCityListByProvinceId(Integer provinceId){

        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "";
        String url = "jdbc:mysql://localhost:3306/springdb?&useSSL=false&serverTimezone=UTC";
        String username = "root";
        String password = "admin";

        List<City> cities = new ArrayList<>();
        City city = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);

            sql = "select id,name,provinceid from city where provinceid = ?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1,provinceId);
            rs = pst.executeQuery();

            while (rs.next()) {
                city = new City();
                city.setId(rs.getInt("id"));
                city.setName(rs.getString("name"));
                city.setProvinceId(rs.getInt("provinceid"));
                cities.add(city);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            }  catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return cities;
    }
}

CascadeFindServlet.java（响应ajax请求，返回一个json类型City数组）

package com.bgy.controller;

import com.bgy.dao.CascadeFindDao;
import com.bgy.entity.City;
import com.fasterxml.jackson.databind.ObjectMapper;

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.ArrayList;
import java.util.List;

public class CascadeFindServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "{}";
        List<City> cities = new ArrayList<>();

        // 接收参数
        String proId = request.getParameter("proid");
        System.out.println("接收到数据proid："+proId);

        CascadeFindDao dao = new CascadeFindDao();

        // 判断参数是否为空
        if (proId != null && !"".equals(proId.trim())){
            cities = dao.queryCityListByProvinceId(Integer.valueOf(proId));

            // 使用jackson把 cities转为 json格式
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(cities);

            // 输出给浏览器
            response.setContentType("application/json;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.println(json);
            writer.flush();
            writer.close();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String json = "{}";
        List<City> cities = new ArrayList<>();

        // 接收参数
        String proId = request.getParameter("proid");
        System.out.println("接收到数据proid："+proId);

        CascadeFindDao dao = new CascadeFindDao();

        // 判断参数是否为空
        if (proId != null && !"".equals(proId.trim())){
            cities = dao.queryCityListByProvinceId(Integer.valueOf(proId));

            // 使用jackson把 cities转为 json格式
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(cities);

            // 输出给浏览器
            response.setContentType("application/json;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.println(json);
            writer.flush();
            writer.close();
        }
    }
}

web.xml（servlet映射关系）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>CascadeFindServlet</servlet-name>
        <servlet-class>com.bgy.controller.CascadeFindServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CascadeFindServlet</servlet-name>
        <url-pattern>/cascadeFindServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>ProvinceServlet</servlet-name>
        <servlet-class>com.bgy.controller.ProvinceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ProvinceServlet</servlet-name>
        <url-pattern>/provinceServlet</url-pattern>
    </servlet-mapping>
</web-app>

Province.java（实体类）

package com.bgy.entity;

public class Province {
    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;
    private City city;


    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 getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }

    public City getCity() {
        return city;
    }

    public void setCity(City city) {
        this.city = city;
    }

    @Override
    public String toString() {
        return "Province{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", jiancheng='" + jiancheng + '\'' +
                ", shenghui='" + shenghui + '\'' +
                ", city=" + city +
                '}';
    }
}

City.java（实体类）

package com.bgy.entity;

public class City {
    private Integer id;
    private String name;
    private Integer provinceId;

    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 Integer getProvinceId() {
        return provinceId;
    }

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

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

数据库结构

白光一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-210813-02---jquery实现ajax&级联查询

jquery-210813-02—jquery实现ajax&级联查询index.jsp（主界面，发起ajax请求）ProvinceDao.java（查找所有的Province）ProvinceServlet.java（响应ajax请求，返回一个json类型Province数组）CascadeFindDao.java（根据Province的id获取所有的City）CascadeFindServlet.java（响应ajax请求，返回一个json类型City数组）web.xml（servl
复制链接

扫一扫