HTML - JSON auslesen?
Hallo,
ich möchte auf einer HTML Seite einen Button haben, welcher auf die URL weiterleitet, welche ich als JSON Ausgabe von https://dsb-notifier-api.up.railway.app/USER/PASSWORT bekomme. Die Ausgabe sieht wie folgt aus:
{"url":"https://dsbmobile.de/data/2863460e-5c08-421d-bce3-1f047d02d09e/xxxxxx-62a6-4a6a-b181-xxxxxx/29e6a368-62a6-4a6a-b181-76f98xxxxa.htm"}
Danke im Voraus!
2 Antworten
Häng dem Button einen Event Listener an. Im Callback holst du dir die URL und leitest weiter.
<!doctype html>
<title>Example</title>
<button id="some-button">Click me</button>
<script>
// get username + password ...
document.getElementById("some-button").addEventListener("click", () => {
fetch(`https://dsb-notifier-api.up.railway.app/${username}/${password}`)
.then(response => response.json())
.then(data => location.href = json.url);
});
});
</script>
Die Daten, die dynamisch in die URL gesetzt werden, sollten zuvor mit der encodeURIComponent-Funktion kodiert werden.
An das letzte then könnte man noch ein catch anhängen, um auf Fehlerfälle zu reagieren.
fetch(`https://dsb-notifier-api.up.railway.app/${username}/${password}`)
.then(response => response.json())
.then(data => location.href = json.url);
.catch(error => {
/* do something ... */
});
Ob man da nun eine Fehlermeldung in einem Dialog ausgibt:
alert("Error!");
o.ä., sei dir überlassen.
Nun, dann erlaubt der Zielserver keine Anfragen via JavaScript. Bau dir eine Serveranwendung (mit PHP o.ä. - je nachdem, was dein Webserver unterstützt) und schicke dem die Nutzerdaten.
Zum Beispiel über ein Formular:
<!doctype html>
<head>
<title>Example</title>
<meta charset="utf-8">
</head>
<body>
<form action="request handler URL ..." method="post">
<input name="username">
<input name="password" type="password">
<button>Go to page...</button>
</form>
</body>
Oder falls der Nutzer bereits angemeldet ist, reicht eine einfache Anfrage (gleicher Code wie in meiner obigen Antwort, nur wird als Request URL die des Request Handlers angegeben).
Der Request Handler wäre die Serveranwendung, die die Daten empfängt, einen Request an die URL verschickt und weiterleitet, indem sie das Location-Feld im Response Header auf die Ziel-URL setzt.
Beispiel mit PHP:
<?php
if (empty($_POST['username']) || empty($_POST['password'])) {
header("Location: URL to start page ...");
exit;
}
$jsonUrl = "https://dsb-notifier-api.up.railway.app/${username}/${password}";
$response = file_get_contents($jsonUrl);
$data = json_decode($response);
if (empty($data) || empty($data['url'])) {
header("Location: URL to start page ...");
exit;
}
header("Location ${data['url']}");
Im Endeffekt möchte ich ja nur, dass ich den Login von https://dsbmobile.de/ umgehen kann, da ich nicht jedem Schüler das Kennwort geben möchte, deshalb hatte ich folgende API auf GitHub gefunden: https://github.com/apuem/dsb-notifier-api . Diese gibt mir als JSON Request immer den aktuellen Link zum Vertretungplan ohne, dass ich mich einlogen muss. Über einen Button sollte auf diese URL, welche von der API ausgegeben wird automatisch weitergeleitet werden.
Dadurch ändert sich an meinem letzten Kommentar nicht viel. Du brauchst die Nutzerdaten nicht mehr übergeben (könntest dir bei dem Formular also die zwei Eingabefelder sparen oder bei einem Fetch die Stringkonkatenation) und serverseitig abfragen, da sie ja offensichtlich von einem festen Profil kommen.
Ganz normaler Link beim Button anlegen.
Ich bekomme folgende Fehlermeldung in der Console: