Javascript AJAX jQUERY初学者。获取分页请求而不重新加载页面

我正在实现分页

GET     /profile/:id           controllers.Application.profile(id : Int)

我有一个项目列表，每页只显示5个项目。 例如路线

localhost:9000/profile/1

我加载前5项，以此类推。问题是我在页面上有4个带分页的部分，所以我需要在不重新加载页面的情况下转到下一页，以便将其他部分保留在当前页面上。如何做到这一点？我不熟悉Ajax和jQuery。我将项目数和项目数传递给此视图

 @for(event <- eventsCreated) {
                <div class="my-event">


                    @if(event.eventPhoto != ""){
                        <img src="@{"/image"}?image=@event.eventPhoto" height=200 width=300 class="img-responsive my-event-photo">
                    }else{
                        <img src="@routes.Assets.at("assets/icons/Forma-3.png")" class="img-responsive my-event-photo">
                    }

                    <div class="my-event-details">
                        <p><a href='@{"/events/details/"}@event.eventId'>@event.eventName</a></p>
                        <p>@event.eventDescription</p>
                        <i class="flaticon-location"></i><i class="flaticon-thumbs1"></i>
                    </div>
                </div>
            }


        <!-- bootstrap pagination -->
        <nav aria-label="Page">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>



   <!-- here I tried to do this by myself but it does nothing -->

             <li class="page-item"><a class="page-link" href="" onclick="Profile()">2</a></li>

   <!-- ============================================= -->

                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
        </nav>

（事件）的

@

这是我的剧本：

<script type="text/javascript">
function Profile($scope, $http) {

    $.ajax({
        type: 'GET',
        url: '/profile/2',
        data: {},
        dataType: 'json',
        success: function(d){
            alert(d.status);
        }
    });
}

函数配置文件（$scope$http）{
$.ajax({
键入：“GET”，
url:“/profile/2”，
数据：{}，
数据类型：“json”，
成功：功能（d）{
警报（d状态）；
}
});
}

如果这些信息很重要，我将使用play2框架