二级联动菜单搭建指南：巧用JavaScript解锁交互体验

2023-03-22 16:38:03

二级联动菜单：解锁交互新世界

在当今信息爆炸的数字时代，用户界面交互设计至关重要。其中，二级联动菜单因其简洁、便捷的交互方式，在复杂信息层级中脱颖而出，成为提升用户体验的利器。本文将深入探讨二级联动菜单的构建之路，带领您开启交互世界的无限可能。

搭桥之石：JavaScript与AJAX的完美协奏

构建二级联动菜单需要JavaScript和AJAX的默契配合。JavaScript作为前端页面的交互核心，负责监听用户操作，并动态更新菜单项。而AJAX则负责与服务器进行异步通信，实时加载和更新数据，为JavaScript提供源源不断的燃料。

JavaScript：前端舞台上的动态舞者

JavaScript在二级联动菜单中扮演着导演的角色，协调着用户操作、DOM操作和AJAX请求之间的互动。通过巧妙地运用事件监听、DOM操作和Ajax请求，JavaScript实现了菜单项的实时联动，让用户在选择时感到流畅自然。

AJAX：幕后英雄，数据交互的推手

AJAX（Asynchronous JavaScript and XML）是实现二级联动菜单的关键推手。它允许我们在不刷新整个页面的情况下，与服务器进行异步通信，实现数据的动态加载和更新。通过发送XMLHttpRequest请求，AJAX从服务器端获取数据，并将其动态填充到菜单项中，让用户能够即时看到相应的结果。

实例解析：亲手打造二级联动菜单

为了让您更深入地了解二级联动菜单的构建过程，我们准备了一个示例代码，带您一步步实现一个简单的二级联动菜单：

// 根据不同浏览器创建 xhr 对象的函数
function createXHR() {
  if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest(); // 针对 IE7 及四大浏览器
  } else if (typeof ActiveXObject != "undefined") {
    if (typeof arguments.callee.activeXString != "string") {
      const versions = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.4.0"];
      for (let i = 0, len = versions.length; i < len; i++) {
        try {
          const xhr = new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          return xhr;
        } catch (ex) {
          // 跳过
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

// 获取省份数据
function getProvince() {
  const xhr = createXHR();
  xhr.open("GET", "province.json", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      const data = JSON.parse(xhr.responseText);
      for (let i = 0, len = data.length; i < len; i++) {
        const option = document.createElement("option");
        option.value = data[i].id;
        option.innerHTML = data[i].name;
        province.appendChild(option);
      }
      province.onchange = function () {
        getCity();
      };
    }
  };
  xhr.send(null);
}

// 获取城市数据
function getCity() {
  const xhr = createXHR();
  xhr.open("GET", `city.json?provinceId=${province.value}`, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      const data = JSON.parse(xhr.responseText);
      city.innerHTML = "";
      for (let i = 0, len = data.length; i < len; i++) {
        const option = document.createElement("option");
        option.value = data[i].id;
        option.innerHTML = data[i].name;
        city.appendChild(option);
      }
    }
  };
  xhr.send(null);
}

// 初始化
window.onload = function () {
  province = document.getElementById("province");
  city = document.getElementById("city");
  getProvince();
};

在这个示例中，我们定义了一个 createXHR() 函数，用于根据不同浏览器创建 XMLHttpRequest 对象。然后定义了 getProvince() 和 getCity() 函数，分别用于获取省份数据和城市数据。最后在 window.onload 事件中初始化页面，并调用 getProvince() 函数获取省份数据。