• Ajax——AJAX实现省市联动

    说明;
        利用Ajax实现省市联动的过程很简单，只需要发送两次ajax请求，第一次自动ajax请求，向数据库中读取所有省份的数据，第二次是在省份发生改变的时候发送第二次Ajax请求，向数据库中读取所有的市级地区，将对应的地区显示在选择标签中。

    省市联动总结目录

    1. 省市联动含义？

    • 在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。

    2. 建立数据库表

    t_area （区域表）
id(PK-自增)	  code		name		pcode
---------------------------------------------
1				001		 河北省		null
2				002		 河南省		null
3				003		 石家庄	    001
4				004		 邯郸			 001
5				005		 郑州			 002
6				006		 洛阳			 002
7				007		 丛台区	    004  

将全国所有的省、市、区、县等信息都存储到一张表当中。
采用的存储方式实际上是code pcode形势。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 将数据存放到数据库
      在这里插入图片描述

    3. 功能实现

    • 创建一个页面：两个select标签

    • 创建一个JavaBean：用来存放从数据库中读取的数据，添加到List集合中，方便使用阿里的JSON转换格式

    • 创建一个Java程序：LianDongServlet

      • 代码实现
      • 这里发送Ajax使用的是jQuery库封装好的代码

    前端页面：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现省市联动title>
head>
<body>

<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">script>

<script type="text/javascript">

    $(function () {
        $.ajax({
            type: "GET",
            url: "/ajax/listarea",
            data: "t="+new Date().getTime(),
            async: true,

            success: function (json) {
                var html = ""
                for (var i = 0; i < json.length; i++) {
                    var area = json[i];
                    var pname = area.name;
                    var code = area.code;

                    html += "+pname+""
                }
                $("#province").html(html)
            }
        })

        $("#province").change(function (){

            // alert(this.value)
            //发送Ajax请求
            $.ajax({
                type: "GET",
                url: "/ajax/listarea",
                data: "pcode="+this.value,
                async: true,

                success: function (json) {
                    var html = ""
                    for (var i = 0; i < json.length; i++) {
                        var area = json[i];
                        var pname = area.name;
                        var code = area.code;

                        html += "+pname+""
                    }
                    $("#city").html(html)
                }
            })
        })
    })



script>

<h1 align="center">实现省市联动h1>

<select id="province">

select>

<select id="city">

select>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    Servlet程序

    @WebServlet("/listarea")
public class LianDongServlet extends HttpServlet {

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

        request.getParameter("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        String pcode = request.getParameter("pcode");

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

        List<Area> areaList = new ArrayList<>();

        try {
            conn = DBUtil.getConnection();
            String sql = "";
            if (pcode == null){
                sql = "select * from t_area where pcode is NULL";
                ps = conn.prepareStatement(sql);
            }else {
                sql = "select * from  t_area where pcode = ?";
                ps = conn.prepareStatement(sql);
                ps.setString(1,pcode);
            }


            rs = ps.executeQuery();

            while (rs.next()){
                String name = rs.getString("name");
                String code = rs.getString("code");

                Area area = new Area(code, name);
                areaList.add(area);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close( conn,ps,rs);
        }

        String jsonString = JSON.toJSONString(areaList);
        out.print(jsonString);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    JavaBean

    package com.lcl.ajax.bean;

import java.util.Objects;

/**
 * @Author Administration
 * @PackageName NewWeb
 * @Package com.lcl.ajax.bean
 * @Date 2022/8/19 17:32
 * @Description:
 */
public class Area {

    private String code;
    private String name;

    public Area() {
    }

    public Area(String code, String name) {
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

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

    @Override
    public String toString() {
        return "Area{" +
                "code=" + code +
                ", name='" + name + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        Area area = (Area) o;
        return code == area.code && Objects.equals(name, area.name);
    }

    @Override
    public int hashCode() {
        return Objects.hash(code, name);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
  • 相关阅读:
    438页19万字农牧业综合服务信息化减灾应急建设方案
    纯js实现html指定页面导出word
    document.body.clientHeight获取可视区域高度为0问题解决
    MongoDB的搭建 和crud操作
    如何评价一门编程语言的难易程度？
    手写简易Spring
    JMESPath: 强大的处理JSON数据
    谨防OKR，90%的公司都在错误地使用它们
    数据结构之数组
    关于AbstractQueuedSynchronizer（JDK1.8）的一点理解.
  • 原文地址：https://blog.csdn.net/weixin_44606952/article/details/126447611