Es stehen Ihnen wie immer verschiedene Möglichkeiten offen:
Moderne Browser bieten die Möglichkeit, aus bereits geladenen Seiten weitere Inhalte nachzuladen. Diese Technik nennt sich Ajax – eine gute Anleitung dazu finden Sie unter MDN: Einführung AJAX.
jQuery bietet für Ajax eine eigene Funktion, die den Zugriff vereinfacht und Browser-Eigenheiten ausbügelt.
jQuery.ajax(url, settings);
Zudem gibt es ein paar Abkürzungen für häufige Anwendungsfälle, z.B. eine Anfrage per HTTP GET
und POST
zu stellen, direkt JSON zu laden oder den Inhalt eines HTML-Elements durch das Ergebnis einer Anfrage zu ersetzen:
$.post(url, data, success(data, textStatus, jqXHR), dataType);
$.get(url, data, success(data, textStatus, jqXHR), dataType);
$.getJSON(url, data, success( data, textStatus, jqXHR));
$(".element").load(url, data, complete(responseText, textStatus, XMLHttpRequest));
Angenommen Sie haben eine Datei namens createUser.php
, die einen neuen Nutzer anlegt und als Parameter dessen Namen und Alter als JSON erwartet, dann könnte der jQuery-Code wie folgt aussehen:
$.ajax({
url: 'api/createUser.php',
data: {
name: 'Arthur Dent',
age: 42,
},
datatype: 'json',
type: 'POST',
success: function(data) {
console.log('Antwort', data);
}
});
jQuery ist auch wegen seines enormen Plugin-Ökosystems bekannt. Diese kapseln meist eine bestimmte Funktionalität – beispielsweise Peity für kleine Charts, Slick für Bildergalerien, Messenger für Benachrichtigungen und viele, viele mehr.