用自寫的jQuery庫+Ajax實現(xiàn)了省市聯(lián)動功能(附實例代碼)

更新時間：2025年07月09日 09:14:52 作者：付朝鮮

省市聯(lián)動功能是指用戶在選擇省/自治區(qū)、城市等行政區(qū)劃時,系統(tǒng)能夠自動加載并顯示下一級行政區(qū)劃數(shù)據(jù)的交互方式,這篇文章主要介紹了如何用自寫的jQuery庫+Ajax實現(xiàn)了省市聯(lián)動功能的相關資料,需要的朋友可以參考下

1. 省市聯(lián)動：

在網(wǎng)頁上，選擇對應的省份之后，動態(tài)的關聯(lián)出該省份對應的市。選擇對應的市之后，動態(tài)地關聯(lián)出城市對應的區(qū)。

2. 設計數(shù)據(jù)庫表

t_area （區(qū)域表）
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      江蘇       null
8               008      南京       007


將全國所有的省、市、區(qū)、縣等信息都存儲到一張表當中。
采用的存儲方式實際上是code pcode形勢。

3. 這里只是一個模擬，所以建的數(shù)據(jù)庫是不完整的，想要完整的數(shù)據(jù)庫，可以去網(wǎng)上找。

4. 上代碼

（1）自寫的jQquery庫

function jQuery(selector){ // selector可能是#id，也可以是其他的選擇器，例如類選擇器：.class
    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.val = function(v){
        if (v == undefined) {
            return domObj.value;
        }else{
            domObj.value = v;
        }
    }
    this.change = function(fun){
        domObj.onchange = fun;
    }
    // 靜態(tài)的方法：發(fā)送ajax請求
    jQuery.ajax = function(jsonArgs){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200) {
                    var jsonObj = JSON.parse(this.responseText);
                    jsonArgs.success(jsonObj);
                }
            }
        }
        if (jsonArgs.type.toUpperCase() == "POST") {
            xhr.open("POST",jsonArgs.url,jsonArgs.async);
            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;

（2）html文件（Ajax請求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用ajax實現(xiàn)省市聯(lián)動</title>
</head>
<body>
<!--引入自己編寫的jQuery庫-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<script type="text/javascript">
$(function(){
    // 發(fā)送ajax請求，獲取所有的省份，省份的pcode是null
    $.ajax({
        type: "get",
        url : "/ajax/listArea",
        data : "t=" + new Date().getTime(),
        async : true,
        success:function(jsonArr){
            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發(fā)生，就發(fā)送ajax請求
    $("#province").change(function(){
        $.ajax({
            type: "get",
            url : "/ajax/listArea",
            data : "t=" + new Date().getTime()+ "&pcode="+this.value,
            async : true,
            success:function(jsonArr){
                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>

（3）servlet文件（后端）

package com.bjpowernode.ajax.servlet;

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

/**
 * 動態(tài)獲取所有的省份
 */
@WebServlet("/listArea")
public class ListAreaServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 連接數(shù)據(jù)庫，獲取所有的對應區(qū)域，最終響應一個JSON格式的字符串給WEB前端
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs= null;
        ArrayList<Area> areas = new ArrayList<>();
        String pcode = request.getParameter("pcode");
        String sql;
        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 = "1234";
            conn = DriverManager.getConnection(url,user,password);
            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);
            }
            rs = ps.executeQuery();
            while (rs.next()) {
                String code = rs.getString("code");
                String name = rs.getString("name");
                Area area = new Area(code, name);
                areas.add(area);
            }
        } catch (ClassNotFoundException e) {
            throw new RuntimeException(e);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally{
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
        }
        response.setContentType("text/html,charset=UTF-8");
        String json = JSON.toJSONString(areas);
        response.getWriter().print(json);
    }

}