54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
<!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> |