怎么在 javascript 中使用 AJAX 实现三级联动

在JavaScript中使用AJAX实现三级联动主要涉及到几个关键技术点：XMLHttpRequest对象的创建和使用、后端API的设计和数据交互、及DOM操作技术。AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。三级联动通常是指有三个下拉列表，选择上一级别的选项后，下一级列表会相应地显示出对应的选项。最常见的例子是选择国家、省/州、城市。

XMLHttpRequest对象的创建和使用是实现AJAX的核心。它允许网页与服务器进行数据交换和更新。通过创建一个XMLHttpRequest对象，网页可以向服务器请求数据或发送数据，实现无需加载整个页面即可更新部分网页的内容。

一、环境准备

在深入讲述实现过程之前，首先确保你的开发环境已经搭建妥当。你需要有一个文本编辑器（如Visual Studio Code、Sublime Text等）来编写代码，同时需要一个简单的服务器环境来处理AJAX请求。如果你是用PHP、Node.js等后端语言，确保对应的服务器环境已经搭建好。

二、创建XMLHttpRequest对象

要使用AJAX，首先要在JavaScript中创建一个XMLHttpRequest对象。这个对象允许发送HTTP请求和接收HTTP响应。

var xhr = new XMLHttpRequest();

创建XMLHttpRequest对象后，你需要定义请求的类型、URL以及是否异步。并设置响应的回调函数，来处理服务器响应的数据。

xhr.open('GET', 'url-for-your-api', true);
xhr.onreadystatechange = function() {
    // 当请求完成且响应已准备好时
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理响应的数据
    }
};

三、后端API的设计

为了实现三级联动，你需要设计一个能根据前端请求返回相应下拉选项的API。这个API需要能够根据请求的不同级别（例如国家、省/州、城市），返回对应级别下的下拉列表选项。

// 一个简单的PHP后端示例
if(isset($_GET['type'])) {
    $type = $_GET['type'];
    // 假设$type可以是country、state、city中的一个
    $response = [];
    switch($type) {
        case 'country':
            $response = ['USA', 'China', 'Brazil'];
            break;
        case 'state':
            // 假设接收到一个country参数
            if(isset($_GET['country'])) {
                $country = $_GET['country'];
                if($country == 'USA') {
                    $response = ['California', 'Florida'];
                }
                // 根据country值，返回不同的state列表
            }
            break;
        // 类似的处理city请求
    }
    echo json_encode($response);
}

四、前端页面实现

在前端页面中，首先需要构建三个下拉列表的HTML结构。

<select id="country">
    <option value="">Select Country</option>
</select>
<select id="state">
    <option value="">Select State</option>
</select>
<select id="city">
    <option value="">Select City</option>
</select>

接下来，使用JavaScript为第一个下拉列表（国家）发送AJAX请求，填充数据，当选择某个国家后，再根据该国家发送请求填充省/州，以此类推。

window.onload = function() {
    var countrySel = document.getElementById('country');
    var stateSel = document.getElementById('state');
    var citySel = document.getElementById('city');
    // 加载国家选项
    fillSelect(countrySel, 'country');
    // 当国家选项改变时，加载州/省选项
    countrySel.onchange = function() {
        fillSelect(stateSel, 'state', { country: countrySel.value });
    };
    // 当州/省选项改变时，加载城市选项
    stateSel.onchange = function() {
        fillSelect(citySel, 'city', { state: stateSel.value });
    };
}
function fillSelect(sel, type, params = {}) {
    var xhr = new XMLHttpRequest();
    var urlParams = new URLSearchParams(params);
    xhr.open('GET', `your-api-url?type=${type}&${urlParams}`, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var options = JSON.parse(xhr.responseText);
            sel.innerHTML = options.map(opt => `<option value="${opt}">${opt}</option>`).join('');
        }
    };
    xhr.send();
}