AJAX之实现省市联动

少不入川。

已于 2022-09-04 17:21:07 修改

阅读量417

点赞数 1

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

于 2022-08-18 16:13:19 首次发布

本文链接：https://blog.csdn.net/qq_52002412/article/details/126408168

版权

JavaWeb 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

文章目录

1.代码封装
2.省市联动的实现

1.代码封装

为了方便后期代码的编写，所以我们可以将一些常用代码封装为一个jQuery库。

这里注意我们遵循的是ES5。

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请求
    /**
     * jsonArgs中的内容J:
     *      请求的方式(type)：GET/POST
     *      请求的URL(url)：url
     *      请求时提交的数据(data)：data
     *      请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
     */
    jQuery.ajax = function(jsonArgs){
        // 1.
        var xhr = new XMLHttpRequest();
        // 2.
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
                    var jsonObj = JSON.parse(this.responseText)
                    // 调用函数
                    jsonArgs.success(jsonObj)
                }
            }
        }
		// 判断请求方式
        if (jsonArgs.type.toUpperCase() == "POST") {
            // 3.
            xhr.open("POST", jsonArgs.url, jsonArgs.async)
            // 4.
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }
		// 判断请求方式
        if (jsonArgs.type.toUpperCase() == "GET") {
            xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
            xhr.send()
        }

    }
}
// 这里使用$代替jQuery
$ = jQuery

// 这里有个细节，执行这个目的是为了让静态方法ajax生效。

new jQuery()

2.省市联动的实现

所谓省市联动就是像我们网购在填收货地址的时候，我们选择对应的省份就会弹出相应的市这样。

2.1 测试数据

t_area （区域表）
code	  name		 pcode
---------------------------
001		  河北省		null
002	  	  河南省		null
003		  石家庄	    001
004		  邯郸		 001
005		  郑州		 002
006		  洛阳		 002
007		  丛台区	    004

2.2 前端代码

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

<!--引入我们编写的jQuery库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>

<script type="text/javascript">
    // 下面的代码块会在页面加载完成以后执行
    $(function(){
        // 发送ajax请求，获取所有的省份。省份的pcode是null
        $.ajax({
            type : "get",
            url : "/ajax/listArea",
            data : "t=" + new Date().getTime(),
            async : true,
            success : function(jsonArr){
                // [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}]
                // 以上格式的json是我们自己设计出来的，希望服务器能够给我们返回这样一个json格式的字符串。
                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>"
                }
                $("#province").html(html)
            }
        })

        // 只要change发生，就发送ajax请求
        $("#province").change(function(){
            // 发送ajax请求
            $.ajax({
                type : "get",
                url : "/ajax/listArea",
                data : "t=" + new Date().getTime() + "&pcode=" + this.value,
                async : true,
                success : function(jsonArr){
                    // [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}]
                    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>"
                    }
                    $("#city").html(html)
                }
            })
        })
    })
</script>

<select id="province">

</select>

<select id="city"></select>

</body>
</html>

2.3 后端代码

package com.bjpowernode.ajax.servlet;

import com.alibaba.fastjson.JSON;
import com.bjpowernode.ajax.beans.Area;
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;

@WebServlet("/listArea")
public class ListAreaServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String pcode = request.getParameter("pcode");

        // 连接数据库，获取所有的对应区域。最终响应一个JSON格式的字符串给WEB前端。
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<Area> areaList = new ArrayList<>();
        try {
            // 注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 获取连接
            String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
            String user = "root";
            String password = "root";
            conn = DriverManager.getConnection(url, user, password);
            // 获取预编译数据库操作对象
            String sql = "";
            if(pcode == null){
                sql = "select code,name from t_area where pcode is null";
                ps = conn.prepareStatement(sql);
            }else{
                sql = "select code,name from t_area where pcode = ?";
                ps = conn.prepareStatement(sql);
                ps.setString(1, pcode);
            }

            // 执行SQL
            rs = ps.executeQuery();
            // 处理结果集
            while (rs.next()) {
                String code = rs.getString("code");
                String name = rs.getString("name");
                Area a = new Area(code, name);
                areaList.add(a);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 释放资源
			...
        }

        response.setContentType("text/html;charset=UTF-8");
        // 使用fastjson将java对象转换成json字符串。
        String json = JSON.toJSONString(areaList);
        // 响应JSON。
        response.getWriter().print(json);
}