Laravel 简单实现Ajax滚动加载示例


Posted in PHP onOctober 22, 2019

开发H5项目的时候我们总是需要用到下拉滚动刷新的方式加载页面。这里用 Laravel 实现一下,直接上代码:

创建模型

这里我们不妨创建一个 文章(Post)模型, 并且生成测试数据 50 条吧。

php artisan make:model -m

模型Post.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{

 public $fillable = ['title','description'];

 
}

迁移文件

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostTable extends Migration
{
 /**
  * Run the migrations.
  *
  * @return void
  */
 public function up()
 {
  Schema::create('posts', function (Blueprint $table) {
   $table->increments('id');
   $table->string('title');
   $table->text('description');
   $table->timestamps();
  });
 }

 /**
  * Reverse the migrations.
  *
  * @return void
  */
 public function down()
 {
  Schema::drop("posts");
 }
}

测试数据 ModelFactory.php

$factory->define(App\Post::class, function (Faker\Generator $faker) {
 return [
  'title' => $faker->sentence,
  'description' => $faker->paragraph,
 ];
});

填充

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
 /**
  * Run the database seeds.
  *
  * @return void
  */
 public function run()
 {
  // $this->call(UsersTableSeeder::class);
  factory(App\Post::class, 50)->create();
 }
}

路由

Route::get('my-post', 'PostController@myPost');

控制器

namespace App\Http\Controllers;

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

class PostController extends Controller
{

 public function myPost(Request $request)
 {
  $posts = Post::paginate(6); 

  if ($request->ajax()) {
   $view = view('data',compact('posts'))->render();
   return response()->json(['html'=>$view]);
  }

  return view('my-post',compact('posts'));
 }

}

视图文件 resources/view/my-post.php

<!DOCTYPE html>
<html>
<head>
 <title>Laravel 分页滚动加载</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <style type="text/css">
  .ajax-load{
   background: #e1e1e1;
   padding: 10px 0px;
   width: 100%;
  }
 </style>
</head>
<body>

<div class="container">
 <h2 class="text-center">Laravel 分页滚动加载</h2>
 <br/>
 <div class="col-md-12" id="post-data">
  @include('data')
 </div>
</div>

<div class="ajax-load text-center" style="display:none">
 <p>![](./loader.gif)加载更多……</p>
</div>

<script type="text/javascript">
 var page = 1;
 $(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() + 1>= $(document).height()) {
   page++;
   loadMoreData(page);
  }
 });

 function loadMoreData(page){
  $.ajax(
   {
    url: '?page=' + page,
    type: "get",
    beforeSend: function()
    {
     $('.ajax-load').show();
    }
   })
   .done(function(data)
   {
    //console.log(data.html);
    if(data.html == " "){
     $('.ajax-load').html("没有数据了……");
     return;
    }
    $('.ajax-load').hide();
    $("#post-data").append(data.html);
   })
   .fail(function(jqXHR, ajaxOptions, thrownError)
   {
    alert('服务未响应……');
   });
 }
</script>

</body>
</html>

resources/view/data.php

@foreach($posts as $post)
<div>
 <h3><a href="">{{ $post->title }}</a></h3>
 <p>{{ str_limit($post->description, 400) }}</p>

 <div class="text-right">
  <button class="btn btn-success">Read More</button>
 </div>

 <hr style="margin-top:5px;">
</div>
@endforeach

效果:

Laravel 简单实现Ajax滚动加载示例

以上这篇Laravel 简单实现Ajax滚动加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
DedeCMS dede_channeltype表字段注释
Apr 07 PHP
php中截取中文字符串的代码小结
Jul 17 PHP
PHP实现异步调用方法研究与分享
Oct 27 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
Aug 31 PHP
php实现utf-8和GB2312编码相互转换函数代码
Feb 07 PHP
PHP flush()与ob_flush()的区别详解
Jun 03 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
Nov 05 PHP
php获取英文姓名首字母的方法
Jul 13 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
May 09 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
Mar 16 PHP
浅谈Yii乐观锁的使用及原理
Jul 25 PHP
php使用fullcalendar日历插件详解
Mar 06 PHP
Laravel 在views中加载公共页面的实现代码
Oct 22 #PHP
laravel添加前台跳转成功页面示例
Oct 22 #PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
Oct 22 #PHP
laravel框架如何设置公共头和公共尾
Oct 22 #PHP
laravel 实现向公共模板中传值 (view composer)
Oct 22 #PHP
浅谈laravel数据库查询返回的数据形式
Oct 21 #PHP
在laravel中实现将查询的对象转换为多维数组的函数
Oct 21 #PHP
You might like
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python smtplib发送带附件邮件小程序
2018/05/22 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python的sorted用法详解
2019/06/25 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
2015年会计个人工作总结
2015/04/02 职场文书
小学推普周活动总结
2015/05/07 职场文书
医院合作意向书范本
2015/05/08 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript