So implementieren Sie Ajax-Paging in Laravel

Laravel implementiert Ajax-Paging

Mit der Entwicklung des Internets und dem Fortschritt der Technologie stellen moderne Webanwendungen immer höhere Anforderungen an die Benutzererfahrung. In solchen Anwendungen ist Paging ein unverzichtbares Feature. Bei der herkömmlichen Paging-Methode wird die herkömmliche Seitenaktualisierungsmethode für Seitensprünge und das Laden von Daten verwendet, was zu einer Verringerung der Benutzererfahrung führt. Insbesondere wenn die Datenmenge groß ist, müssen Benutzer lange warten, bis sie angezeigt werden Inhalte, die sie wollen. Daher wird häufig eine neue Paging-Methode verwendet – Ajax-Paging.

Das Laravel-Framework bietet leistungsstarke Unterstützung und ermöglicht uns die einfache Implementierung von Ajax-Paging. In diesem Artikel wird erläutert, wie Sie mit Laravel Ajax-Paging implementieren.

1. Routing konfigurieren

Zuerst müssen wir das Routing konfigurieren, um Ajax-Paging zu unterstützen. Fügen Sie die folgende Route in die web.php-Datei ein:

Route::get('/posts', 'PostController@index');
Route::get('/posts/fetch_data', 'PostController@fetch_data');

2. Controller erstellen

Als nächstes müssen wir einen Controller erstellen, um die Anfrage zu verarbeiten. Führen Sie den folgenden Befehl aus, um einen PostController in Laravel zu erstellen:

php artisan make:controller PostController

Fügen Sie den folgenden Code im PostController hinzu:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::paginate(5);
        return view(&#39;posts.index&#39;, compact(&#39;posts&#39;));
    }

    public function fetch_data(Request $request)
    {
        if($request->ajax()) {
            $posts = Post::paginate(5);
            return view('posts.data', compact('posts'))->render();
        }
    }

}

Wir verwenden die Paginate-Methode, um die Post-Daten abzurufen. In der fetch_data-Methode verwenden wir eine Blade-Ansicht namens data, um die Daten wie unten gezeigt darzustellen:

<div class="row">
    @foreach($posts as $post)
        <div class="col-md-6">
            <div class="card mb-3">
                <img class="card-img-top" src="{{ $post->image }}" alt="{{ $post->title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ $post->title }}</h5>
                    <p class="card-text">{{ $post->excerpt }}</p>
                    <a href="{{ route(&#39;posts.show&#39;, $post) }}" class="btn btn-primary">Read More</a>
                </div>
            </div>
        </div>
    @endforeach
</div>

3. Ansicht erstellen

Jetzt müssen wir eine Ansicht erstellen, um die Beitragsdaten anzuzeigen und die Ajax-Paginierung zu aktivieren. Fügen Sie den folgenden Inhalt in die Datei resources/views/posts/index.blade.php ein:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div id="posts">
            @include('posts.data')
        </div>
        <div class="d-flex justify-content-center">
            {{ $posts->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();

                var page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });
        });

        function fetch_data(page)
        {
            $.ajax({
                url:"/posts/fetch_data?page="+page,
                success:function(data)
                {
                    $('#posts').html(data);
                }
            });
        }
    </script>
@endsection

Hier haben wir die @pagination-Direktive von Blade verwendet, um den Seitenzahl-Link darzustellen und gleichzeitig die Daten aus data.blade.php einzubeziehen. In der @scripts-Direktive verwenden wir jQuery, um das Klickereignis zu verarbeiten und die Daten darzustellen.

4. Stile erstellen

Zuletzt müssen wir noch einige Stile hinzufügen, damit die Seite schöner aussieht. Fügen Sie den folgenden Code zur Datei public/css/app.css hinzu:

.card {
    border: none;
}

.card-text {
    color: #555;
}

.card-img-top {
    height: 220px;
    object-fit: cover;
}

Jetzt ist unsere Laravel-Anwendung bereit für die Verwendung der Ajax-Paginierung! Wenn der Benutzer auf den Link mit der Seitenzahl klickt, lädt die Seite die Daten, ohne sie zu aktualisieren. Dies kann das Benutzererlebnis erheblich verbessern, insbesondere wenn die Datenmenge besonders groß ist.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie das Laravel-Framework zum Implementieren von Ajax-Paging verwenden. Durch die Verwendung der Ajax-Paginierung können Sie das Benutzererlebnis in Ihrer Webanwendung erheblich verbessern, insbesondere wenn das Datenvolumen groß ist. Mit dem Laravel-Framework können wir diese Funktionalität einfach implementieren und unsere Anwendung optimieren. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Ajax-Paging in Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!