AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。树形菜单是一种常见的用户界面元素,用于展示层次结构的数据,如文件系统、组织结构或分类目录。
假设我们有一个简单的组织结构,可以使用以下数据库表结构:
CREATE TABLE departments (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
parent_id INT,
FOREIGN KEY (parent_id) REFERENCES departments(id)
);
以下是一个简单的AJAX树形菜单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Tree Menu</title>
<style>
ul {
list-style-type: none;
padding-left: 20px;
}
.expanded {
display: block;
}
.collapsed {
display: none;
}
</style>
</head>
<body>
<div id="tree-menu"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="tree-menu.js"></script>
</body>
</html>
$(document).ready(function() {
function loadTree(parentId) {
$.ajax({
url: '/api/departments',
method: 'GET',
data: { parent_id: parentId },
success: function(data) {
let html = '<ul>';
data.forEach(function(department) {
html += `<li>${department.name}`;
if (department.children.length > 0) {
html += '<ul class="collapsed"></ul>';
}
html += '</li>';
});
html += '</ul>';
$('#tree-menu').html(html);
// Handle click events to expand/collapse
$('.collapsed').on('click', function() {
$(this).toggleClass('collapsed expanded');
});
}
});
}
loadTree(0); // Load root departments
});
const express = require('express');
const app = express();
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'test'
});
connection.connect();
app.get('/api/departments', (req, res) => {
const parentId = req.query.parent_id || 0;
connection.query('SELECT * FROM departments WHERE parent_id = ?', [parentId], (error, results) => {
if (error) throw error;
res.json(results);
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
希望这些信息对你有所帮助!如果有更多问题,请随时提问。
没有搜到相关的沙龙