PHP AJAX Umfrage

Was ist eine AJAX-Umfrage?

Eine AJAX-Umfrage ist ein kleines Abstimmungs-Widget, mit dem ein Benutzer eine Option auswählen kann, die Stimme im Hintergrund an den Server sendet und dann die aktualisierten Ergebnisse anzeigt – alles ohne die Seite neu zu laden. AJAX (Asynchronous JavaScript and XML) ist die Technik, mit der Daten nach dem Laden der Seite mithilfe von JavaScript mit dem Server ausgetauscht werden.

Dieses Kapitel erstellt eine vollständige Umfrage: eine MySQL-Tabelle zum Speichern der Optionen und ihrer Stimmenzählungen, ein PHP-Skript, das eine Stimme aufzeichnet und die aktuelle Auszählung als JSON zurückgibt, sowie eine kleine Menge JavaScript, die die Stimme sendet und die Ergebnisse anzeigt.

Wenn du Daten kontinuierlich per Timer aktualisieren möchtest (ein Live-Ergebnisbrett, ein Status-Dashboard), gelten dieselben Bausteine – dieses Muster heißt Polling und wird am Ende des Kapitels behandelt.

Warum AJAX für eine Umfrage verwenden?

• Kein Seitenreload. Der Benutzer bleibt auf der Seite; nur der Umfragebereich ändert sich. Das fühlt sich sofort an und lässt den Rest der Seite (Scroll-Position, Video, Formulareingabe) intakt.
• Weniger übertragene Daten. Anstatt das gesamte HTML-Dokument erneut zu senden, gibt der Server nur die Stimmenzählungen als kleines JSON-Payload zurück.
• Live-Ergebnisse. Da die Antwort Daten sind, kein Markup, kannst du sofort eine Ergebnisleiste neu rendern und diese sogar per Timer aktualisieren, um Stimmen anderer Benutzer widerzuspiegeln.

Schritt 1 — Datenbanktabelle erstellen

Jede Umfrageoption ist eine Zeile. Wir speichern den Optionstext und einen laufenden Stimmenzähler.

CREATE TABLE poll_options (
    id INT AUTO_INCREMENT PRIMARY KEY,
    option_text VARCHAR(100) NOT NULL,
    votes INT NOT NULL DEFAULT 0
);

INSERT INTO poll_options (option_text) VALUES
    ('PHP'),
    ('JavaScript'),
    ('Python');

Wenn du neu im Erstellen von Tabellen bist, sieh dir Create a MySQL Table und Insert Data an.

Schritt 2 — HTML-Formular erstellen

Das Formular listet die Optionen als Radio-Buttons auf und reserviert einen Container für die Ergebnisse.

<form id="pollForm">
  <p>What is your favorite language?</p>
  <label><input type="radio" name="option" value="1"> PHP</label>
  <label><input type="radio" name="option" value="2"> JavaScript</label>
  <label><input type="radio" name="option" value="3"> Python</label>
  <button type="submit">Vote</button>
</form>

<div id="pollResults"></div>

Der value jedes Radio-Buttons ist die id der Option aus der Datenbank – das ist das Einzige, was wir an den Server senden müssen.

Schritt 3 — PHP-Handler schreiben

Das PHP-Skript hat zwei Aufgaben: eine Stimme aufzeichnen (wenn eine eingereicht wurde) und die aktuellen Ergebnisse als JSON zurückgeben. Verwende immer Prepared Statements, damit ein vom Browser kommender Wert niemals als SQL interpretiert werden kann.

<?php
header('Content-Type: application/json');

$dsn = "mysql:host=localhost;dbname=your_database;charset=utf8mb4";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, 'username', 'password', $options);

    // If a vote was submitted, increment that option's counter.
    if (isset($_POST['option'])) {
        $optionId = (int) $_POST['option'];
        $update = $pdo->prepare(
            "UPDATE poll_options SET votes = votes + 1 WHERE id = :id"
        );
        $update->execute([':id' => $optionId]);
    }

    // Always return the current tally.
    $rows = $pdo->query(
        "SELECT id, option_text, votes FROM poll_options ORDER BY id"
    )->fetchAll();

    $total = array_sum(array_column($rows, 'votes'));

    echo json_encode([
        'status'  => 'success',
        'total'   => $total,
        'options' => $rows,
    ]);
} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => 'Database error']);
}

Das Casten der eingehenden ID mit (int) und das Binden mit :id stellt sicher, dass der Wert strikt als Zahl behandelt wird, nicht als Teil der Abfrage. Mehr dazu findest du unter PHP Prepared Statements und json_encode().

Schritt 4 — Stimme mit JavaScript senden

Wir fangen das submit-Ereignis des Formulars ab, senden die gewählte Option mit fetch() und zeichnen dann anhand der JSON-Antwort eine Ergebnisleiste.

const form = document.getElementById('pollForm');
const resultsBox = document.getElementById('pollResults');

form.addEventListener('submit', function (event) {
  event.preventDefault(); // Stop the normal page reload.

  const selected = form.querySelector('input[name="option"]:checked');
  if (!selected) return; // Nothing chosen yet.

  const body = new URLSearchParams({ option: selected.value });

  fetch('poll.php', { method: 'POST', body })
    .then(response => response.json())
    .then(showResults)
    .catch(error => console.error('Vote failed:', error));
});

function showResults(data) {
  if (data.status !== 'success') {
    resultsBox.textContent = 'Could not load results.';
    return;
  }

  resultsBox.innerHTML = data.options.map(opt => {
    const percent = data.total
      ? Math.round((opt.votes / data.total) * 100)
      : 0;
    return `<div>${opt.option_text}: ${opt.votes} votes (${percent}%)</div>`;
  }).join('');
}

event.preventDefault() verhindert, dass der Browser ein vollständiges Absenden durchführt – das ist der eigentliche Zweck von AJAX. Der Prozentsatz wird auf dem Client aus den vom Server zurückgegebenen Zählungen berechnet, sodass die Leiste immer mit den neuesten Daten übereinstimmt.

Schritt 5 — Ergebnisse mit Polling live halten

Bisher werden die Ergebnisse nur aktualisiert, wenn dieser Benutzer abstimmt. Um Stimmen anderer Benutzer widerzuspiegeln, pollt man den Server per Timer – fordert alle paar Sekunden die neueste Auszählung an und rendert sie neu:

function refreshResults() {
  fetch('poll.php') // GET, no vote — just read the tally.
    .then(response => response.json())
    .then(showResults)
    .catch(error => console.error('Refresh failed:', error));
}

setInterval(refreshResults, 5000); // Every 5 seconds.

Da der PHP-Handler bei jeder Anfrage (mit oder ohne Stimme) die Auszählung zurückgibt, reicht ein einfaches GET aus, um aktuelle Zahlen abzurufen. Wähle das Intervall sorgfältig: Ein kurzes Intervall fühlt sich lebendiger an, erzeugt aber mehr Anfragen. Für wirklich echtzeitfähige Daten sind WebSockets oder Server-Sent Events besser geeignet als festes Intervall-Polling.

Häufige Fallstricke

• event.preventDefault() vergessen. Ohne es lädt das Formular die Seite neu und der AJAX-Aufruf wird mittendrin abgebrochen.
• Der Options-ID vertrauen. Immer casten/validieren und ein Prepared Statement verwenden; niemals $_POST in SQL einbauen.
• Doppelt zählen. Dieses einfache Beispiel erlaubt einem Browser, mehrfach abzustimmen. In der Produktion durch Session, Cookie oder IP einschränken.
• Zu aggressives Polling. Ein Ein-Sekunden-Intervall auf einer stark frequentierten Seite kann den Server überlasten; 3–10 Sekunden sind in der Regel ausreichend.

Zusammenfassung

Eine AJAX-Umfrage kombiniert eine MySQL-Tabelle, einen PHP-Endpunkt, der eine Stimme aufzeichnet und die Auszählung als JSON zurückgibt, und JavaScript, das mit fetch() absendet und die Ergebnisse rendert – kein Seitenreload erforderlich. Füge ein setInterval-Polling hinzu, um die Zahlen für alle live zu halten.

graph TD;
    A(User Selects Option and Clicks Vote) --> B(JavaScript Sends POST with fetch);
    B --> C(PHP Increments Vote with Prepared Statement);
    C --> D(PHP Returns Tally as JSON);
    D --> E(JavaScript Renders Results Bar);
    F(Timer Every 5s) --> G(GET poll.php for Latest Tally);
    G --> D;

Übungen