AJAX 作业1 - 必要商城分类 目标:完成如下分类切换效果 要求: 默认上来展示所有一级分类数据 点击一级分类切换,展示下属二级分类数据 点击二级分类分类,展示下属三级分类数据 不要用JQuery,代码
时间: 2024-09-26 16:17:00 浏览: 40
AJAX (Asynchronous JavaScript and XML) 是一种用于创建异步网页应用程序的技术,它允许前端JavaScript通过发送HTTP请求获取数据,而无需刷新整个页面。在这个"必要商城分类"的作业中,你可以按照以下步骤来实现分类切换的效果:
1. HTML结构:
```html
<div id="category-tree">
<ul class="level-1 categories"></ul>
</div>
<!-- 隐藏的div用于存储各级别的分类数据 -->
<div id="hidden-categories" style="display:none;">
<!-- 使用服务器返回的JSON数据填充 -->
</div>
```
2. JavaScript部分 (使用原生JS或ES6+):
```javascript
// 假设从服务器获取的数据是这样的格式
const jsonData = {
// 分级分类数据示例
categories: [
{ level: 1, name: "一级分类1", children: [ { level: 2, name: "二级分类1-1", children: [{ level: 3, name: "三级分类1-1-1" }] }, ... ] },
...
]
};
function loadCategories(level, parentCategory) {
const categoryListEl = document.querySelector(`.level-${level} .categories`);
if (!parentCategory) {
// 展示所有一级分类
categoryListEl.innerHTML = jsonData.categories.map(cat => `<li data-id="${cat.id}">${cat.name}</li>`).join('');
} else {
categoryListEl.innerHTML = '';
parentCategory.children.forEach(childCat => {
const childLi = `<li data-id="${childCat.id}">${childCat.name} <span onclick="loadCategories(${level + 1}, ${childCat})">展开</span></li>`;
categoryListEl.appendChild(childLi);
});
}
}
document.addEventListener('DOMContentLoaded', function() {
// 初始加载所有一级分类
loadCategories(1);
});
```
3. 当用户点击二级分类时,事件监听器会触发`loadCategories`函数,传入下一级别和当前点击的二级分类。
注意,这里的代码假设了JSON数据结构已预先从服务器获取并存在`jsonData`变量中。实际项目中,你需要替换为动态获取数据的实际代码,并处理好网络请求的状态管理。