Ajax——AJAX实现省市联动

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

省市联动总结目录

  • 1. 省市联动含义?
  • 2. 建立数据库表
  • 3. 功能实现

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形势。
  • 将数据存放到数据库
    Ajax——AJAX实现省市联动_第1张图片

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>

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

你可能感兴趣的:(#,Ajax,ajax,servlet,javascript)