JS-Snippet: Http-Request
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: