Fügen Sie JavaScript MDCRipple zu Ajax Loaded Button hinzu

Habdul Hazeez 12 Oktober 2023

JavaScript JavaScript Ajax

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 von XMLHttpRtouest, um Folgendes zu tun.
2.1 Ermitteln Sie die ID des <main>-Elements.
2.2 Setzen Sie seine Eigenschaft innerHTML auf den Antworttext von XMLHttpRequest.
2.3 Hängen Sie MDCRippel an die Schaltfläche in mdc-button.html an.
Öffnen Sie eine GET-Anforderung an die Datei mdc-button.html.
Senden Sie die mdc-button.html als 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:

MDCRippel auf einer HTML-Schaltfläche

Autor: Habdul Hazeez

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.

Fügen Sie JavaScript MDCRipple zu Ajax Loaded Button hinzu

Verwandter Artikel - JavaScript Ajax