Deutsch

PHP-Tutorial

PHP Operatoren

PHP-Control-Anweisungen

PHP Arrays

PHP-Funktionen

PHP Superglobals

PHP Dateiverarbeitung

Objektorientiertes PHP

PHP Web-Entwicklung

PHP AJAX

PHP XML

PHP Anmeldebeispiel

PHP erweitert

PHP - AJAX-Suche: Ein Anfängerleitfaden

Hallo da draußen, zukünftige PHP-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der AJAX-betriebenen Suchfunktion mit PHP zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich es kaum erwarten, dieses Wissen mit Ihnen zu teilen. Also, lasst uns die Ärmel hochwerfen und eintauchen!

PHP - AJAX Search

Was ist AJAX-Suche?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was AJAX-Suche eigentlich ist. Stellen Sie sich vor, Sie sind in einer riesigen Bibliothek und suchen ein Buch. Anstatt herumzulaufen und jede Regal zu überprüfen, wäre es nicht großartig, wenn Sie den Namen des Buches eingeben könnten und sofort Ergebnisse sehen? Genau das macht AJAX-Suche für Websites!

AJAX steht für Asynchrones JavaScript und XML. Machen Sie sich keine Sorgen, wenn das kompliziert klingt - bis zum Ende dieses Tutorials werden Sie es wie ein Profi verwenden!

Schritt 1: Einrichtung unseres Projekts

Lassen Sie uns mit der Erstellung der Dateien beginnen, die wir für unser Projekt benötigen. Wir brauchen drei Dateien:

  1. index.html (unsere Hauptseite mit der Suchbox)
  2. search.php (unser PHP-Skript, das die Suche verarbeitet)
  3. script.js (unsere JavaScript-Datei, um die AJAX-Anfrage zu stellen)

Erstellung von index.html

Zunächst erstellen wir unsere HTML-Datei mit einer einfachen Suchbox:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Search Beispiel</title>
</head>
<body>
<h1>AJAX Suche</h1>
<input type="text" id="searchBox" placeholder="Suchen...">
<div id="results"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

In dieser Datei haben wir eine einfache Suchbox und einen div zum Anzeigen unserer Ergebnisse erstellt. Wir haben auch jQuery hinzugefügt, um unsere AJAX-Aufrufe zu erleichtern, und unsere script.js-Datei verlinkt.

Schritt 2: Erstellung unseres PHP-Suchskripts

Nun erstellen wir unsere search.php-Datei. Dies wird die Backend-Funktion unserer Suchfunktion:

<?php
// Simulieren einer Datenbank mit einem Array
$fruits = array("Apfel", "Banane", "Kirsche", "Dattel", "Erdbeere", "Feige", "Traube");

// Den Suchbegriff von der AJAX-Anfrage erhalten
$searchTerm = $_GET['term'];

// Das Frucht-Array basierend auf dem Suchbegriff filtern
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// Die Ergebnisse als JSON zurückgeben
echo json_encode(array_values($results));

Lassen Sie uns das durcharbeiten:

  1. Wir erstellen ein einfaches Array von Früchten, um eine Datenbank zu simulieren.
  2. Wir erhalten den Suchbegriff aus der GET-Anfrage (gesendet von unserem AJAX-Aufruf).
  3. Wir verwenden array_filter, um Früchte zu finden, die zu unserem Suchbegriff passen.
  4. Schließlich geben wir die Ergebnisse als JSON zurück, was für JavaScript einfach zu handhaben ist.

Schritt 3: Erstellung unserer JavaScript-Datei

Nun zu dem aufregenden Teil - lassen Sie uns unsere script.js-Datei erstellen, um die AJAX-Magie zu vollbringen!

$(document).ready(function() {
$('#searchBox').on('keyup', function() {
var searchTerm = $(this).val();
if(searchTerm.length > 1) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {term: searchTerm},
dataType: 'json',
success: function(data) {
var results = '';
$.each(data, function(index, value) {
results += '<p>' + value + '</p>';
});
$('#results').html(results);
}
});
} else {
$('#results').html('');
}
});
});

Lassen Sie uns das Schritt für Schritt durchgehen:

  1. Wir warten, bis das Dokument bereit ist.
  2. Wir hören auf 'keyup'- Ereignisse in unserer Suchbox.
  3. Wenn der Suchbegriff länger als ein Zeichen ist, stellen wir eine AJAX-Anfrage.
  4. Wir senden den Suchbegriff an unser PHP-Skript.
  5. Wenn wir Ergebnisse zurückbekommen,格式ieren wir sie als HTML und显示它们。

Und das war's! Ein voll funktionsfähiges AJAX-Suchsystem in nur drei Dateien.

Alles zusammenbringen

Nun, da wir alle unsere Teile haben, sehen wir, wie sie zusammenarbeiten:

  1. Wenn Sie in die Suchbox tippen, erkennt das JavaScript das 'keyup'- Ereignis.
  2. Wenn Sie mehr als ein Zeichen getippt haben, sendet es eine AJAX-Anfrage an search.php.
  3. search.php nimmt Ihren Suchbegriff, findet passende Früchte und gibt sie als JSON zurück.
  4. Das JavaScript empfängt diese JSON, formatiert sie als HTML und zeigt sie auf der Seite an.

All dies geschieht sofort, ohne dass die Seite neu geladen werden muss. Pretty cool, oder?

Fazit

Glückwunsch! Sie haben Ihr erstes AJAX-Suchsystem erstellt. Das ist erst der Anfang - Sie können dies erweitern, um echte Datenbanken zu durchsuchen, komplexere Filter hinzuzufügen oder sogar eine Autovervollständigungs-Funktion implementieren.

Denken Sie daran, der Schlüssel zum Beherrschen der Programmierung ist die Übung. Versuchen Sie, diesen Code zu ändern, fügen Sie Ihre eigenen Funktionen hinzu und vor allem, haben Sie Spaß daran!

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir in diesem Tutorial verwendet haben:

Methode Beschreibung
$.ajax() jQuery-Methode zum Ausführen eines AJAX-Aufrufs
array_filter() PHP-Funktion zum Filtern der Elemente eines Arrays mit einer Callback-Funktion
json_encode() PHP-Funktion zum Konvertieren eines PHP-Arrays in eine JSON-Zeichenkette
$.each() jQuery-Methode zum Iterieren über ein Array oder Objekt

Weiter codieren, weiter lernen, und bevor Sie es wissen, erstellen Sie erstaunliche Webanwendungen. Bis下次, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:
PHP - Einführung in AJAX
Nächstes Tutorial:
PHP - AJAX XML Parser