Laravel에서 Ajax 페이징을 구현하는 방법

Laravel은 Ajax 페이징을 구현합니다

인터넷이 발전하고 기술이 발전함에 따라 최신 웹 애플리케이션은 사용자 경험에 대한 요구 사항이 점점 더 높아지고 있습니다. 이러한 애플리케이션에서 페이징은 필수적인 기능입니다. 기존 페이징 방식에서는 페이지 이동 및 데이터 로딩에 전통적인 페이지 새로 고침 방식을 사용하므로, 특히 데이터 양이 많을 경우 사용자가 해당 페이지를 보려면 오랜 시간을 기다려야 합니다. 그들이 원하는 콘텐츠. 따라서 새로운 페이징 방법인 Ajax 페이징이 널리 사용됩니다.

Laravel 프레임워크는 강력한 지원을 제공하고 Ajax 페이징을 쉽게 구현할 수 있도록 해줍니다. 이 기사에서는 Laravel을 사용하여 Ajax 페이징을 구현하는 방법을 소개합니다.

1. 라우팅 구성

먼저 Ajax 페이징을 지원하도록 라우팅을 구성해야 합니다. web.php 파일에 다음 경로를 추가합니다:

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

2. Create Controller

다음으로 요청을 처리할 컨트롤러를 만들어야 합니다. Laravel에서 PostController를 생성하려면 다음 명령을 실행하세요:

php artisan make:controller PostController

PostController에 다음 코드를 추가하세요:

<?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();
        }
    }

}

포스트 데이터를 얻기 위해 paginate 메소드를 사용합니다. fetch_data 메소드에서는 data라는 블레이드 뷰를 사용하여 아래와 같이 데이터를 렌더링합니다.

<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. Create View

이제 게시물 데이터를 표시하고 Ajax 페이지 매김을 활성화하는 뷰를 생성해야 합니다. resources/views/posts/index.blade.php 파일에 다음 내용을 추가하세요:

@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

여기서는 data.blade.php의 데이터를 포함하면서 페이지 번호 링크를 렌더링하기 위해 블레이드의 @pagination 지시문을 사용했습니다. @scripts 지시문에서는 jQuery를 사용하여 클릭 이벤트를 처리하고 데이터를 렌더링합니다.

4. 스타일 만들기

마지막으로 페이지를 더 예쁘게 보이도록 몇 가지 스타일을 추가해야 합니다. public/css/app.css 파일에 다음 코드를 추가하세요:

.card {
    border: none;
}

.card-text {
    color: #555;
}

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

이제 Laravel 애플리케이션이 Ajax 페이지 매김을 사용할 준비가 되었습니다! 사용자가 페이지 번호 링크를 클릭하면 페이지를 새로 고치지 않고 데이터를 로드합니다. 이는 특히 데이터 양이 특히 많을 때 사용자 경험을 크게 향상시킬 수 있습니다.

요약

이 글에서는 Laravel 프레임워크를 사용하여 Ajax 페이징을 구현하는 방법을 소개합니다. Ajax 페이지 매김을 사용하면 특히 데이터 볼륨이 큰 경우 웹 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. Laravel 프레임워크를 사용하면 이 기능을 쉽게 구현하고 애플리케이션을 최적화할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 Laravel에서 Ajax 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!