JS,AJAX,必要商城分类 目标:完成如下分类切换效果 要求: 默认上来展示所有一级分类数据 点击一级分类切换,展示下属二级分类数据 点击二级分类分类,展示下属三级分类数据 案例代码
时间: 2024-09-26 08:11:00 浏览: 9
要在JavaScript中利用AJAX完成必要的商城分类切换效果,首先需要准备一个服务器端提供分类数据的接口。这里给出一个简单的示例代码,用于模拟数据获取和渲染:
```javascript
// 假设你有一个返回JSON数据的API接口,比如:'/api/categories'
const fetchCategories = async (level, parentId) => {
try {
const response = await axios.get(`/api/categories?level=${level}&parent_id=${parentId}`);
return response.data; // 返回的是包含分类信息的对象数组
} catch (error) {
console.error('Error fetching categories:', error);
return [];
}
};
// 初始化页面加载一级分类
loadCategories('一级分类', '');
// 加载分类列表的函数
function loadCategories(level, parentId) {
fetchCategories(level, parentId)
.then(categories => {
displayCategories(level, categories, 'one'); // 一级分类的容器ID
})
.catch(() => {
console.error('Failed to load categories');
});
}
// 显示分类的函数,递归处理子级
function displayCategories(level, categories, containerId) {
const container = document.getElementById(containerId);
container.innerHTML = ''; // 清空现有内容
categories.forEach(category => {
const item = document.createElement('li');
item.textContent = category.name;
// 添加点击事件处理
item.addEventListener('click', () => {
loadCategories(`${level}分类`, category.id); // 根据点击的类别加载对应的二级分类
});
// 如果这是最后一级分类,则直接添加到DOM
if (category.children && category.children.length > 0) {
const subContainer = document.createElement('ul');
subContainer.id = `sub_${containerId}_${category.id}`;
subContainer.addEventListener('click', e => {
// 点击二级分类内部的项,加载三级分类
if (e.target.tagName.toLowerCase() === 'li') {
loadCategories('三级分类', e.target.dataset.parentId);
}
});
displayCategories(level, category.children, subContainer.id);
item.appendChild(subContainer);
} else {
container.appendChild(item);
}
});
}
// 调用loadCategories函数来初始化
loadCategories('一级分类', '');
```
请注意,这只是一个简化的示例,实际应用中可能需要考虑更多的边界情况,例如错误处理、前端性能优化等。此外,上述代码中的`axios`库需要预先引入。