Fügen Sie JavaScript MDCRipple zu Ajax Loaded Button hinzu
In diesem Tutorial lernen Sie, MDCRippel zu einer mit AJAX geladenen HTML-Schaltfläche hinzuzufügen. Wir verwenden MDC über ihre CSS- und JavaScript-Dateien aus dem UNPKG CDN.
Fügen Sie JavaScript MDCRipple zu Ajax Loaded Button hinzu
Eine AJAX-Anfrage funktioniert auf einem Server, daher können Sie diesen Abschnitt überspringen, wenn Sie Zugriff auf einen Live-Server haben; Wenn Sie jedoch keinen Zugriff auf einen Live-Server haben, laden Sie XAMPP herunter.
Suchen Sie nach der Installation von XAMPP den Ordner htdocs in Ihrer XAMPP-Installation und erstellen Sie ein Arbeitsverzeichnis. Dieses Verzeichnis enthält das Codebeispielprojekt in diesem Artikel.
Unser HTML-Code lädt die MDC CSS- und JavaScript-Dateien aus dem UNPKG CDN. Außerdem enthält es ein <main>-Element, das aus einem HTML <button> besteht.
Diese Schaltfläche hat ein onclick-Ereignisattribut, dessen Wert eine Funktion ist. Diese Funktion wird aufgerufen, wenn der Benutzer auf die Schaltfläche klickt und die AJAX-Anforderung initiiert.
Der folgende Code ist also der HTML-Code.
<head>
<meta charset="utf-8">
<title>MDC with Ajax</title>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<main id="mdc-button-container">
<button type="button" onclick="loadMDCButton()">CLICK ME</button>
</main>
</body>
</html>
Als nächstes erstellen und speichern Sie eine weitere HTML-Datei in Ihrem Arbeitsverzeichnis. Sie können die Datei mdc-button.html nennen.
Diese Datei enthält den Code für die HTML-Schaltfläche. Darüber hinaus wird die Schaltfläche MDC-Klassennamen haben.
Es wird also einfach sein, MDCRippel über JavaScript anzuhängen. Das Folgende ist der Code für mdc-button.html.
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Click for Ripple</span>
</button>
Der JavaScript-Code erstellt eine AJAX-Verbindung und funktioniert wie folgt:
- Erstellen Sie eine neue
XMLHttpRequest. - Verwenden Sie die
onload-Methode vonXMLHttpRtouest, um Folgendes zu tun.
2.1 Ermitteln Sie die ID des<main>-Elements.
2.2 Setzen Sie seine EigenschaftinnerHTMLauf den Antworttext vonXMLHttpRequest.
2.3 Hängen Sie MDCRippel an die Schaltfläche inmdc-button.htmlan. - Öffnen Sie eine
GET-Anforderung an die Dateimdc-button.html. - Senden Sie die
mdc-button.htmlals Ersatz für die Schaltfläche im Element<main>.
Das Folgende ist der Code für die JavaScript-Funktion.
function loadMDCButton() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById('mdc-button-container').innerHTML =
this.responseText;
mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
} xhttp.open('GET', 'mdc-button.html', true);
xhttp.send();
}
Im Folgenden finden Sie den vollständigen Code für unser Beispielprojekt.
<head>
<meta charset="utf-8">
<title>MDC with Ajax</title>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<main id="mdc-button-container">
<button type="button" onclick="loadMDCButton()">CLICK ME</button>
</main>
<script type="text/javascript">
function loadMDCButton() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("mdc-button-container").innerHTML = this.responseText;
mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
}
xhttp.open("GET", "mdc-button.html", true);
xhttp.send();
}
</script>
</body>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn