Ajax——AJAX实现省市联动

皮皮皮皮皮皮皮卡乒

已于 2022-08-21 09:55:31 修改

阅读量1k

点赞数 4

分类专栏： # Ajax 文章标签： ajax servlet javascript

于 2022-08-21 09:53:10 首次发布

本文链接：https://blog.csdn.net/weixin_44606952/article/details/126447611

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

说明;
利用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形势。

将数据存放到数据库

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 = "<option value=''>--请选择--</option>"
                for (var i = 0; i < json.length; i++) {
                    var area = json[i];
                    var pname = area.name;
                    var code = area.code;

                    html += "<option value='"+code+"'>"+pname+"</option>"
                }
                $("#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 = "<option value=''>--请选择--</option>"
                    for (var i = 0; i < json.length; i++) {
                        var area = json[i];
                        var pname = area.name;
                        var code = area.code;

                        html += "<option value='"+code+"'>"+pname+"</option>"
                    }
                    $("#city").html(html)
                }
            })
        })
    })



</script>

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

<select id="province">

</select>

<select id="city">

</select>
</body>
</html>

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

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

皮皮皮皮皮皮皮卡乒

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax——AJAX实现省市联动

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

扫一扫