Laravel一般情况下是要分页的，就用links(), 如果用ajax来动态获得页面内容应该怎么做呢？具体步骤：
- 做一个模型文件，连同迁移和工厂文件
- 填充假数据
- 先做一个页面并且把规定的载入数量的内容返回
- 做视图文件
- 在前端用jquery和ajax来载入规定数量的内容，并且要传递要跳过数量的内容
- 记载所有的前端的单位内容数量，如果总数量和前端的数量相等的时候把载入更多这个按钮隐藏掉。
1.模型文件,控制器，迁移文件和工厂文件
php artisan make:controller PostsController
php artisan make:model Post -mf
2. 填充假数据, 工厂文件
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
php artisan tinker
factory(\App\Post::class, 40)->create();
3. 控制器文件
添加方法
public function index()
{
$posts = Post::take(6)->get();
//载入最早的6个内容
return view('load', ['posts' => $posts]);
}
添加路由web.php
Route::get('load', 'PostsController@index')->name('load');
4.添加视图文件
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="content">
@if(count($posts) > 0)
@foreach($posts as $post)
<div class="post-box">
<h4>{{$post->title}}</h4>
<p>{{$post->description}}</p>
</div>
@endforeach
@endif
</div>
@if(count($posts)>0)
<button class="btn btn-primary load-more" data-totalResult="{{ App\Post::count() }}">加载更多</button>
@endif
</div>
</body>
</html>
5.添加jquery, axios
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
6.添加ajax的请求路由
Route::get('load-more-data','PostsController@more_data')->name('more-data');
7.请求其他页面的控制器方法
function more_data(Request $request){
if($request->ajax()){
$skip=$request->skip;
//如果是ajax请求的话，从前端获取skip数字，这个数字是每个页面要跳过的条数
$take=6;
//分页单位数量
$posts=Post::skip($skip)->take($take)->get();
return response()->json($posts);
}else{
return response()->json('Direct Access Not Allowed!!');
}
}
8. ajax请求写法
$(document).ready(function(){
$(".load-more").on('click',function(){
var _totalCurrentResult=$(".post-box").length;
// Ajax请求
axios.get(main_site+'/load-more-data',{
skip:_totalCurrentResult
})
.then(function(response){
var _html='';
$.each(response,function(index,value){
_html+='<div class="post-box">';
_html+='<h4>'+value.title+'</h4>';
_html+='<p>'+value.description+'</p>';
_html+='</div>';
});
$(".content").append(_html);
var _totalCurrentResult=$(".post-box").length;
var _totalResult=parseInt($(".load-more").attr('data-totalResult'));
if(_totalCurrentResult==_totalResult){
$(".load-more").remove();
}else{
$(".load-more").html('加载更多');
}
});
});
</script>
网友评论