Task to JS + AJAX and PHP, code from 21-05-26

2026-05-21 10:31:08 +02:00
parent ac5030828d
commit e25792cbb9
3 changed files with 116 additions and 2 deletions
--- a/Jahr/javascript/AJAX/mitarbeiterquali/mitarbeiterQuali.html
+++ b/Jahr/javascript/AJAX/mitarbeiterquali/mitarbeiterQuali.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Mitarbeiter Qualifikation</title>
+    <style>
+        table { width: 50%; border-collapse: collapse; margin-top: 20px; }
+        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
+        th { background-color: #f4f4f4; }
+    </style>
+</head>
+<body>
+
+    <label for="qualiSelect">Qualifikation:</label>
+    <select id="qualiSelect" onchange="loadMitarbeiter(this.value)">
+        <option value="">- Bitte Auswählen -</option>
+        <option value="Java">Java</option>
+        <option value="HTML">HTML</option>
+        <option value="CSS">CSS</option>
+        <option value="RedisDB">RedisDB</option>
+        <option value="MySQL">MySQL</option>
+    </select>
+
+    <table id="resultTable" style="display:none;">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Qualifikation</th>
+            </tr>
+        </thead>
+        <tbody id="tableBody"></tbody>
+    </table>
+
+    <script>
+    function loadMitarbeiter(quali) {
+        if (!quali) {
+            document.getElementById('resultTable').style.display = 'none';
+            return;
+        }
+
+        // AJAX-Anfrage über GET senden
+        fetch(`backend.php?qualifikation=${encodeURIComponent(quali)}`)
+            .then(response => response.json())
+            .then(data => {
+                const tbody = document.getElementById('tableBody');
+                tbody.innerHTML = ''; // Alte Ergebnisse löschen
+
+                if(data.length > 0) {
+                    data.forEach(mitarbeiter => {
+                        const row = `<tr>
+                            <td>${mitarbeiter.name}</td>
+                            <td>${mitarbeiter.qualifikation}</td>
+                        </tr>`;
+                        tbody.innerHTML += row;
+                    });
+                    document.getElementById('resultTable').style.display = 'table';
+                } else {
+                    tbody.innerHTML = '<tr><td colspan="2">Keine Mitarbeiter gefunden.</td></tr>';
+                    document.getElementById('resultTable').style.display = 'table';
+                }
+            })
+            .catch(error => console.error('Fehler:', error));
+    }
+    </script>
+</body>
+</html>