Laravel 简单实现Ajax滚动加载示例
时间:2022-07-27
本文章向大家介绍Laravel 简单实现Ajax滚动加载示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
开发H5项目的时候我们总是需要用到下拉滚动刷新的方式加载页面。这里用 Laravel 实现一下,直接上代码:
创建模型
这里我们不妨创建一个 文章(Post)模型, 并且生成测试数据 50 条吧。
php artisan make:model -m
模型Post.php
namespace App;
use IlluminateDatabaseEloquentModel;
class Post extends Model
{
public $fillable = ['title','description'];
}
迁移文件
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
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(AppPost::class, function (FakerGenerator $faker) {
return [
'title' = $faker- sentence,
'description' = $faker- paragraph,
];
});
填充
<?php
use IlluminateDatabaseSeeder;
class DatabaseSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
// $this- call(UsersTableSeeder::class);
factory(AppPost::class, 50)- create();
}
}
路由
Route::get('my-post', 'PostController@myPost');
控制器
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppHttpRequests;
use AppPost;
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滚动加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考。
- 技术分享 | 深入分析APPCMS<=2.0.101 sql注入漏洞
- React Native布局之FlexBox
- 图算法之bfs、dfs、prim、Dijkstra
- 深入理解Android Build系统
- Mac Jenkins搭建 Android/IOS自动打包环境
- javascript 红皮高程(11)
- javascript 红皮高程(8)
- javascript 红皮高程(7)
- javascript 红皮高程(17)-- 左移(<<)
- javascript 红皮高程(17)-- 按位异或(XOR)
- javascript 红皮高程(17)
- javascript 红皮高程(16)
- javascript 红皮高程(15)
- javascript 红皮高程(21)-- 乘性操作符
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- deepin 任务栏消失问题
- PyQt5 技术篇-调用消息对话框(QMessageBox)进行简单提示!
- composer改源
- Android内存管理(四)Linux的内存管理机制
- JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性。
- Python 错误使用tuple问题:TypeError: 'tuple' object does not support item assignment. 原因及解决办法
- E-BERT,电商领域语言模型优化实践
- PyQt5 技术篇-透明窗口设置方法,窗口透明度的设置
- 为hexo增加gitalk评论系统
- Python 技巧篇-用print打印输出但不换行方法
- gitalk 自动初始化
- 给hexo申请证书并设置https
- Python 面向对象-如何查看类的父类,外部如何获取类的名字
- Python操作excel:用xlwt设置excel单元格背景颜色,给字体加粗。【附】颜色表
- Python+selenium 自动化-获取当前页面的url地址,打开指定的url地址