基于ajax实现省市联动

最新推荐文章于 2023-07-09 18:52:27 发布

雨连绵花满楼

最新推荐文章于 2023-07-09 18:52:27 发布

阅读量177

点赞数

分类专栏： java 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_56398287/article/details/128361823

版权

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

 ~首先先要现实省份 点击省份之后发生change事件
 1.当复选框发生change事件时向后端发送ajax请求
 2.后端servlet接收到了发来的请求中的数据来查询数据库
 3.将查到的数据路中的数据进行封装 然后响应给前端

前端代码块

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

<!--引进自己编写的js文件-->
<script src="/AJAX/js/js_jQuery1.0.js"></script>
<script>
    /**
     * ~首先先要现实省份 点击省份之后发生change事件
     * 1.当复选框发生change事件时向后端发送ajax请求
     * 2.后端servlet接收到了发来的请求中的数据来查询数据库
     * 3.将查到的数据路中的数据进行封装 然后响应给前端
     */
    //先获取所有省份
    $(function () {

            $.ajax({
                type: "GET",
                url: "/AJAX/ajaxreq6",
                data: "t=" + new Date().getTime(),
                async: true,
                success: function (jsonArr) {
                    //jsonArr是返回来的json类型的字符串
                    //这个json字符串本质实在servlet中返回来的
                    //在这里要拼串了
                    var html = "<option value=''>--请选择省份--</option>"
                    for (var i = 0; i < jsonArr.length; i++) {
                        var area = jsonArr[i];
                        html += "<option value='"+area.code+"'>"+area.name+"</option>"
                    }
                    //设置到id=province里
                    $("#province").html(html);
                }
            })

            //获得复选框对象(市)
            $("#province").change(function () {
               // alert(this.value)
                //change事件发生后发送ajax请求
                //this.value就是你点击的这个复选框的某个键
                $.ajax({
                    type: "GET",
                    url: "/AJAX/ajaxreq6",
                    data: "t=" + new Date().getTime() + "&pcode=" + this.value,
                    async: true,
                    success: function (jsonArr) {
                        //jsonArr是返回来的json类型的字符串
                        //这个json字符串本质实在servlet中返回来的
                        //在这里要拼串了
                        var html = "<option value=''>--请选择市--</option>"
                        for (let i = 0; i < jsonArr.length; i++) {
                            var area = jsonArr[i];
                            html += "<option value='"+area.code+"'>"+area.name+"</option>"
                        }
                        //设置到id=city里
                        $("#city").html(html);
                    }
                })
            })

        })





</script>

<select id="province">
<!--    <option value="">&#45;&#45;请选择省份&#45;&#45;</option>-->
<!--    <option value="001">河北省</option>-->
<!--    <option value="002">河南省</option>-->
</select>
</select>

<select id="city">

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

使用的自己封装的jQuery

function jQuery(selector) {
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function (htmlStr) {
        domObj.innerHTML = htmlStr
    }
    this.click = function (fun) {
        domObj.onclick = fun
    }
    this.focus = function (fun) {
        domObj.onfocus = fun
    }
    this.blur = function (fun) {
        domObj.onblur = fun
    }
    this.change = function (fun) {
        domObj.onchange = fun
    }
    this.val = function (v) {
        if (v == undefined) {
            return domObj.value
        } else {
            domObj.value = v
        }
    }
//静态方法创建ajax请求
    /**
     * 参数是json字符串
     * 请求类型 url 同步还是异步  请求的数据
     */

    jQuery.ajax=function (jsonstr) {
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.注册函数
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                if(xhr.status==200){
                    //获得传来的字符串
                    var jsonObj=JSON.parse(this.responseText);
                    jsonstr.success(jsonObj)
                }
            }
        }
        if(jsonstr.type.toUpperCase()=="GET"){

            //开启通道
            xhr.open("GET",jsonstr.url+"?"+jsonstr.data,jsonstr.async);
            xhr.send();

        }else if(jsonstr.type.toUpperCase()=="POST"){
            //开启通道

            xhr.open("POST",jsonstr.url,jsonstr.async);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

            xhr.send(jsonstr.data);
        }

    }

}
//函数赋值给$
$=jQuery
new jQuery()

后端代码

package com.wpc.Ajax;

import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

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

/**
 * @author 一介草莽子
 * version 1.0
 */
@SuppressWarnings({"all"})
@WebServlet("/ajaxreq6")
public class AjaxRequest6 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<Area> areaList = new ArrayList<>();
        //获得驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            //获得连接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db02?useUnicode=true&characterEncoding=UTF-8"
            ,"root","4653long");
            String pcode = request.getParameter("pcode");
            if(pcode==null){
                //查询省
                String sql = "select code,`name` from t_area where pcode is null";
                ps = conn.prepareStatement(sql);
                rs = ps.executeQuery();
            }else {
                //查询市
                String sql = "select code,`name` from t_area where pcode =?";
                ps = conn.prepareStatement(sql);
                ps.setString(1,pcode);
                rs = ps.executeQuery();
            }




            while (rs.next()) {
                //获得内部内容
                String code = rs.getString("code");
                String name = rs.getString("name");
                Area area = new Area(code, name);
                areaList.add(area);
            }
            //将其转换为json字符串
            String jsonString = JSON.toJSONString(areaList);
            response.getWriter().print(jsonString);//响应给前端
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }

    }
}


package com.wpc.Ajax;

/**
 * @author 一介草莽子
 * version 1.0
 */
@SuppressWarnings({"all"})
public class Area {
    private String code;
    private String name;

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