使用laravel和ajax实现整个页面无刷新的操作方法
时间:2022-07-27
本文章向大家介绍使用laravel和ajax实现整个页面无刷新的操作方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、数据库文件
CREATE TABLE IF NOT EXISTS mr_key
(
id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '键id',
project_id int(11) NOT NULL COMMENT '外键项目id',
name varchar(100) NOT NULL COMMENT '键名',
structure enum('string', 'hash', 'list', 'set', 'zset') COMMENT '数据结构',
ttl varchar(50) NOT NULL COMMENT '过期时间',
user varchar(20) NOT NULL COMMENT '使用者',
reason varchar(255) NOT NULL COMMENT '使用原因',
created_time int(11) NOT NULL COMMENT '创建时间',
isDelete int(2) NOT NULL DEFAULT '0' COMMENT '是否删除(0=不删除,1=删除)'
)ENGINE=innodb DEFAULT CHARSET=utf8 COMMENT='键表';
2、首页的内容
@include('layout.nav')
@include('layout.slide')
<div class="contain" style="width: 84%;" id="contain"
<div style="width:30%;margin-bottom:20px;"
<select class="form-control" id="project"
<option value="0" 请选择城市</option
@foreach ($projects as $project)
<option value="{{ $project- id }}" @if("{{ $project- id }}" == "{{ $project_id }}")selected="selected"@endif {{ $project- name }}</option
@endforeach
</select
</div
<table class="table table-hover"
<thead
<tr
<th id</th
<th 键名</th
<th 数据结构</th
<th 过期时间</th
<th 使用者</th
<th 使用原因</th
<th 操作</th
</tr
</thead
<tbody
@foreach ($keys as $key)
<tr
<td {{ $key- id }}</td
<td {{ $key- name }}</td
<td {{ $key- structure }}</td
<td {{ date("Y-m-d H:i:s", ($key- ttl + $key- created_time)) }}</td
<td {{ $key- user }}</td
<td {{ $key- reason }}</td
<td 修改 删除</td
</tr
@endforeach
</tbody
<div style="position:absolute;top:450px;right:120px;"
{{ $keys- render() }}
<div style="float:right;letter-spacing: 2px;margin-left:10px;" class="pagi__count" 共<b {{ $count }}</b 条数据</div
</div
</table
</div
效果:
3、使用ajax:给选择框加上change事件,触发时,到KeyController下的klist方法,并传入project_id,在klist方法中进行处理,获取数据传出来,将整个页面的body的内容全都改变。
<script type="text/javascript"
$('#project').change(function() {
$.post("{{ url('key/klist') }}/"+$('#project').val(), // 路由为Route::any('/key/klist/{project_id}')
{'_token': '{{ csrf_token() }}'}, function(data) {
$('#body').html(data);
});
});
</script
4、klist的方法:判断传入的project_id为0的话,就获取全部数据,不为0,则获取外键==project_id的key的值,将整个页面都传出去
public function klist($project_id)
{
if($project_id == 0) {
$projects = Project::all();
$keys = Key::orderBy('created_time', 'desc')- paginate(8);
$count = Key::count();
$project_id = 0;
return view('key.index', compact('project_id', 'projects','keys', 'count'));
}
$projects = Project::all();
$keys = Project::find($project_id)- key()- paginate(8);
$count = Project::find($project_id)- key- count();
return view('key.index', compact('project_id' ,'projects', 'keys', 'count'));
}
5、实现:当下拉框改变时,内容改变并未刷新
以上这篇使用laravel和ajax实现整个页面无刷新的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考。
- 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 数组属性和方法
- 简直骚操作,ThreadLocal还能当缓存用
- 品优购(IDEA版)-第一天
- 品优购(IDEA版)-第二天
- 品优购第四天
- 深度学习框架OneFlow的并行特色(附框架源码和教程)
- 图解Java设计模式
- python 如何解决 No module named ‘pip‘问题
- 用多智能体强化学习算法MADDPG解决"老鹰捉小鸡"问题
- 网站日志实时分析之Flink处理实时热门和PVUV统计
- 大数据量下的集合过滤—Bloom Filter
- 实时数仓链路分享:kafka =>SparkStreaming=>kudu集成kerberos
- rocketmq broker启动报错,找不到或无法加载主类
- 视频监控联网RTSP平台EasyNVR用户管理权限与实际权限不匹配,该如何排查?
- 2020CHINC,来赴一场“共建智慧医院”的约会
- 《闲扯Redis十》Redis 跳跃表的结构实现