delete moved files and add AJAX stuff from 20-5-26

2026-05-20 15:11:16 +02:00
parent b3afa9163b
commit a7e5c71d86
3 changed files with 79 additions and 0 deletions
--- a/Jahr/javascript/AJAX/ajax2.html
+++ b/Jahr/javascript/AJAX/ajax2.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AJAX BEispiel 2</title>
+</head>
+<body>
+    <form>
+        <label>Mitarbeiter
+            <select id="selection" name="mitarbeiter">
+                <option>Bitte Auswählen</option>
+                <option value="0">Mortens</option>
+                <option value="1">Müller</option>
+                <option value="2">Meier</option>
+                <option value="3">Schulu</option>
+            </select>
+        </label>
+    </form>
+
+    <div id="output"></div>
+    <script>
+        // ajax
+        let xhr = new XMLHttpRequest();
+
+        window.addEventListener("load", function(){
+            document.getElementById("selection").addEventListener("change",auswahl);
+        });
+
+        function auswahl(){
+            xhr.open("get", "gehalt.json"); 
+
+            xhr.send();
+
+            xhr.onreadystatechange=function(){
+
+                if(xhr.readyState == 4 && xhr.status == 200){
+                    let res = JSON.parse(xhr.responseText);
+                    console.log(res);
+
+                    let select = document.getElementById("selection").value;
+                    console.log(select);
+
+                    document.getElementById("output").innerHTML = 
+                    "Name: " +res[select].Name +
+                    "<br>" +
+                    "Gehalt: " + res[select].Gehalt + " EUR";
+                } 
+            }
+        }
+
+    </script>
+</body>
+</html>