Ajax和JSON完成二级菜单联动的功能

Ajax和JSON完成二级菜单联动的基础概念

Ajax（Asynchronous JavaScript and XML） 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过异步通信，Ajax允许网页与服务器进行少量的数据交换，从而实现网页的异步更新。

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集，采用完全独立于语言的文本格式来存储和表示数据。

优势

提高用户体验：通过异步加载数据，用户无需等待整个页面刷新，交互体验更流畅。
减少服务器负载：只请求必要的数据，减少了不必要的数据传输，降低了服务器的压力。
前后端分离：前端通过Ajax请求数据，后端专注于数据处理，便于开发和维护。

类型与应用场景

类型：基于XML的Ajax和基于JSON的Ajax。现代Web开发中，JSON因其简洁性和易用性而更为流行。
应用场景：
- 动态内容加载（如新闻网站的新闻更新）
- 表单验证（无需提交表单即可实时验证）
- 交互式地图服务
- 实时聊天应用
- 二级菜单联动等。

示例代码

以下是一个使用Ajax和JSON实现二级菜单联动的简单示例：

HTML部分

<select id="mainMenu">
  <option value="">请选择主菜单</option>
  <option value="category1">分类1</option>
  <option value="category2">分类2</option>
</select>

<select id="subMenu" disabled>
  <option>请选择子菜单</option>
</select>

JavaScript部分

document.getElementById('mainMenu').addEventListener('change', function() {
  var mainMenuValue = this.value;
  var subMenu = document.getElementById('subMenu');
  
  // 清空并禁用子菜单
  subMenu.innerHTML = '<option>请选择子菜单</option>';
  subMenu.disabled = true;
  
  if (mainMenuValue) {
    // 发起Ajax请求获取子菜单数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'getSubMenu.php?category=' + encodeURIComponent(mainMenuValue), true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        var subMenuData = JSON.parse(xhr.responseText);
        // 填充子菜单选项
        subMenu.innerHTML = '';
        subMenu.disabled = false;
        subMenuData.forEach(function(item) {
          var option = document.createElement('option');
          option.value = item.value;
          option.textContent = item.text;
          subMenu.appendChild(option);
        });
      }
    };
    xhr.send();
  }
});

后端PHP示例（getSubMenu.php）

<?php
header('Content-Type: application/json');

$category = $_GET['category'] ?? '';

$subMenuData = [];

switch ($category) {
  case 'category1':
    $subMenuData = [
      ['value' => 'sub1', 'text' => '子分类1'],
      ['value' => 'sub2', 'text' => '子分类2']
    ];
    break;
  case 'category2':
    $subMenuData = [
      ['value' => 'sub3', 'text' => '子分类3'],
      ['value' => 'sub4', 'text' => '子分类4']
    ];
    break;
}

echo json_encode($subMenuData);
?>