Willkommen!

Willkommen auf der privaten Webseite von Axel Hahn.

Axels Blog

JS-Snippet: Http-Request

24.04.2025 - 0:20

Hier ein weiterer Javascript-Schnipsel…

Manchmal möchte ich in einer webbasierten Admin eine Schaltfläche haben, die etwas löscht oder eine Aktion auslöst, die aber nicht mit einem GET Request ausgelöst werden können soll. Also men A-Tag oder Button-Tag soll beispielsweise einen POST request auslösen und Parameter mitgeben können. Aber auch PUT oder DELETE Requests sind möglich.

Die nachfolgende Funktion führt einen Http-Request aus und zeigt den Output in einer DOM-ID oder aber bei Fehlen der ID im gesamten Browser-Fenster. Wobei Letzteres noch den schönen Effekt hat, dass ein F5 im Browser-Fenster den POST rquest nicht wiederholt.

/**
 * Make an http request with given method, url, form data.
 * The response can be shown in a given dom id or in the full browser window.
 * 
 * @param {string}  method  http method; eg. GET, POST, PUT, ...
 * @param {string}  url     url to request
 * @param {json}    data    request body as key -> value in a JSON
 * @param {string}  idOut   optional: id of output element in DOM; default: write response in browser
 * @return void
 */
async function httprequest(method="GET", url = "", data = {}, idOut = null) {

    // console.log("httprequest("+method+", "+url+", "+data+", "+idOut+")");

    if (method == "POST" || method == "PUT") {
        var fd = new FormData();
        for (var key in data) {
            fd.append(key, data[key]);
        }
    } else {
        var fd = null;
    }

    // Default options are marked with *
    const response = await fetch(url, {
        method: method, // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, *cors, same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, *same-origin, omit
        headers: {
            // "Content-Type": "application/json",
            // 'Content-Type': 'application/x-www-form-urlencoded',
            // 'Content-Type': 'multipart/form-data',
        },
        redirect: "follow", // manual, *follow, error
        referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: fd, // body data type must match "Content-Type" header
    });
    // return response.json(); // parses JSON response into native JavaScript objects

    var responsebody = await response.text();
    if (idOut) {
        document.getElementById(idOut).innerHTML = responsebody;
    } else {
        document.open();
        document.write(responsebody);
        document.close();
    }

}

Und so wird sie verwendet:

Nachfogendes HTML-Snippet zeigt einen Button. Beim onclick-Event sehen wir die obige Funktion einmal eingebunden.
Man sieht

  • die Http-Methode: POST
  • die auufzurufende URL: die aktuelle - mittels location.href
  • POST-Parameter: als JSON wird die Variable “action” mit dem Wert “backup” übergeben. Mit PHP liesse sich dies mit $_POST['’action’] lesen.
<button 
  class="btn"
  onclick="httprequest('POST', location.href , {'action': 'backup'})" 
>Create new backup</button>

Die Funktion ist noch nicht featurecomlete. Sie kann noch erweitert werden, um Http-Request-Header mit zu übergeben. Aber ich hoffe, für den ein oder anderen ist sie bereits in dieser Form nützlich.

Weiterführende Links:


Blog-Kategorieen: Programmierung Javascript


Letzte Blog-Einträge:

Axels Blog


24.04.2025(0:20 Uhr)JS-Snippet: Http-Request
16.12.2024(2:00 Uhr)ahCache Klasse ist nun PHP 8.4 kompatibel
21.11.2024(1:55 Uhr)Bash: mit jq über Listen-Elemente loopen
24.10.2024(1:29 Uhr)PHP Email Catcher
17.10.2024(0:26 Uhr)AAI Logon Seite mit PHP
07.10.2024(20:22 Uhr)Gaza 1 Jahr nach dem HAMAS Attentat
18.09.2024(2:10 Uhr)JS: Inhalt einer Json Datei in einen Hash holen
25.07.2024(2:17 Uhr)IML Appmonitor: Code-Update für PHP8+
20.07.2024(1:54 Uhr)Docker Fehler - Archives directory /var/cache/apt/archives/partial is missing. - Acquire (2: No such file or directory)
14.06.2024(0:33 Uhr)Icinga Summit 2024

Statistisches



Herkunft der Besucher

Übersicht der Herkunftsländer der Besucher meiner Webseite. Bots von Suchmaschinen sind in dieser Liste ausgeschlossen.

Übersicht der Herkunftsländer der Besucher meiner Webseite. Bots von Suchmaschinen sind in dieser Liste ausgeschlossen.


Webbrowser meiner Besucher

Welche Webbrowser werden verwendet? Die Anzeige fasst alle Versionsnummern zusammen.

Welche Webbrowser werden verwendet? Die Anzeige fasst alle Versionsnummern zusammen.