Deutsch

Laravel-Anleitung

Laravel - Ajax: Ein Anfängerguide

Hallo dort, zukünftige Laravel-Entwickler! Ich freue mich darauf, euch auf eine Reise durch die wundersame Welt von Laravel und Ajax mitzunehmen. Als jemand, der seit vielen Jahren Informatik unterrichtet, kann ich euch sagen, dass das Beherrschen dieses Themas eine ganze neue Welt der Möglichkeiten in eurer WebentwicklungsKarriere eröffnen wird. Also tauchen wir ein!

Laravel - Ajax

Was ist Ajax?

Bevor wir uns den spezifischen Aspekten von Laravel zuwenden, lassen Sie uns verstehen, was Ajax ist. Ajax steht für Asynchrones JavaScript und XML. Keine Sorge, wenn das wie ein komplizierter Name klingt - ich erinnere mich, als ich es das erste Mal gehört habe, dachte ich, es wäre ein Reinigungsmittel!

In einfachen Worten ermöglicht Ajax das dynamische Aktualisieren von WebseitenInhalten ohne Neuladen der gesamten Seite. Es ist wie Magie - aber besser, denn ihr werdet很快 wissen, wie es funktioniert!

Warum Ajax in Laravel verwenden?

Laravel, unser bevorzugter PHP-Framework, harmoniert perfekt mit Ajax. Es ermöglicht uns die Erstellung von flüssigen, reaktiven Webanwendungen, die sich mehr wie Desktop-Apps anfühlen. Stellt euch vor, ihr klickt auf eine Schaltfläche und seht sofortige Ergebnisse, ohne diese lästige 页面刷新. Das ist die Kraft von Ajax in Laravel!

Laravel für Ajax einrichten

Zuerst einmal, lassen Sie uns sicherstellen, dass unser Laravel-Projekt bereit für einige Ajax-Aktionen ist.

  1. Erstellen Sie ein neues Laravel-Projekt (falls noch nicht geschehen):
composer create-project --prefer-dist laravel/laravel ajax-tutorial
  1. Navigieren Sie zu Ihrem Projektverzeichnis:
cd ajax-tutorial
  1. Stellen Sie sicher, dass Sie eine Datenbank eingerichtet und in Ihrer .env-Datei konfiguriert haben.

Die json() Funktion: Dein neuer bester Freund

Nun, lassen Sie uns über den Star unseres Shows sprechen: die json()-Funktion. Diese kleine Perle macht Ajax in Laravel so glatt und einfach.

Syntax der json() Funktion

Hier ist die grundlegende Syntax:

return response()->json($data, $status_code);

Lassen Sie uns das einmal auseinandernehmen:

  • $data: Dies sind die Daten, die Sie an den Client zurücksenden möchten. Es kann ein Array, ein Objekt oder sogar eine Laravel-Sammlung sein.
  • $status_code: Dies ist optional. Es ist der HTTP-Statuscode, den Sie mit der Antwort senden möchten (z.B. 200 für Erfolg, 404 für nicht gefunden).

json() in Aktion bringen

Lassen Sie uns ein einfaches Beispiel erstellen, um die json()-Funktion in Aktion zu sehen. Wir erstellen eine Route, die eine JSON-Antwort zurückgibt.

  1. Öffnen Sie Ihre routes/web.php-Datei und fügen Sie diese Route hinzu:
Route::get('/greeting', function () {
$data = ['message' => 'Hallo, Ajax!'];
return response()->json($data);
});
  1. Wenn Sie nun /greeting in Ihrem Browser besuchen, sehen Sie eine JSON-Antwort:
{"message":"Hallo, Ajax!"}

Spannend, oder? Aber warten Sie, es gibt mehr!

Ein realweltbeispiel: dynamische Benutzer-Suche

Lassen Sie uns etwas Praktischeres erstellen - eine Benutzer-Suchfunktion, die Ergebnisse aktualisiert, während Sie tippen. Hier leuchtet Ajax wirklich!

Schritt 1: Erstellen der Route

In Ihrer routes/web.php, fügen Sie hinzu:

Route::get('/search', 'UserController@search');

Schritt 2: Erstellen des Controllers

Führen Sie diesen Befehl aus, um einen neuen Controller zu erstellen:

php artisan make:controller UserController

Öffnen Sie nun app/Http/Controllers/UserController.php und fügen Sie diese Methode hinzu:

public function search(Request $request)
{
$query = $request->get('query');
$users = User::where('name', 'LIKE', "%{$query}%")->get();
return response()->json($users);
}

Schritt 3: Erstellen der Ansicht

Erstellen Sie eine neue Datei resources/views/search.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>Benutzer-Suche</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Benutzer suchen...">
<div id="results"></div>

<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: '/search',
type: 'GET',
data: {'query': query},
success: function(data) {
var results = '';
$.each(data, function(key, value) {
results += '<p>' + value.name + '</p>';
});
$('#results').html(results);
}
});
});
});
</script>
</body>
</html>

Schritt 4: Aktualisieren der Route

In routes/web.php, fügen Sie hinzu:

Route::get('/', function () {
return view('search');
});

Nun, wenn Sie Ihre Homepage besuchen und anfangen, im Suchfeld zu tippen, werden Sie die Benutzerergebnisse dynamisch erscheinen sehen!

Häufige Ajax-Methoden in Laravel

Hier ist eine Tabelle mit häufig verwendeten Ajax-Methoden, die Sie in Laravel verwenden könnten:

Methode Beschreibung Beispiel
GET Daten abrufen $.get('/users', function(data) { ... });
POST Daten senden, um zu erstellen $.post('/users', {name: 'John'}, function(data) { ... });
PUT Vorhandene Daten aktualisieren $.ajax({url: '/users/1', type: 'PUT', data: {name: 'John'}, success: function(data) { ... }});
DELETE Daten löschen $.ajax({url: '/users/1', type: 'DELETE', success: function(data) { ... }});

Fazit

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt von Ajax mit Laravel gewagt. Bedenken Sie, wie beim Lernen jeder neuen Fähigkeit, mag es am Anfang überwältigend erscheinen. Aber glauben Sie mir, mit Übung werden Sie in kürzester Zeit dynamische, reaktive Webanwendungen erstellen können.

Als wir uns beenden, erinnere ich mich an einen Schüler, der mir einmal sagte, dass das Lernen von Ajax seinem Website die Superkräfte verliehen hat. Und wissen Sie was? Er hatte recht! Also auf geht's, experimentieren Sie und fürchten Sie sich nicht, Fehler zu machen. Das ist, wie wir alle lernen und wachsen.

Frohes Coden und mögen alle Ihre Ajax-Anfragen immer 200 OK zurückkehren!

Credits: Image by storyset

Vorheriges Tutorial:
Laravel - E-Mail senden
Nächstes Tutorial:
Laravel - Fehlerbehandlung