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')

请选择城市

@foreach ($projects as $project)

id }}" == "{{ $project_id }}")selected="selected"@endif >{{ $project->name }}

@endforeach

id键名数据结构过期时间使用者使用原因操作

@foreach ($keys as $key)

{{ $key->id }}{{ $key->name }}{{ $key->structure }}{{ date("Y-m-d H:i:s", ($key->ttl + $key->created_time)) }}{{ $key->user }}{{ $key->reason }}修改 删除

@endforeach

{{ $keys->render() }}

{{ $count }}条数据

效果:

3、使用ajax:给选择框加上change事件,触发时,到KeyController下的klist方法,并传入project_id,在klist方法中进行处理,获取数据传出来,将整个页面的body的内容全都改变。

$('#project').change(function() {

$.post("{{ url('key/klist') }}/"+$('#project').val(), // 路由为Route::any('/key/klist/{project_id}')

{'_token': '{{ csrf_token() }}'}, function(data) {

$('#body').html(data);

});

});

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实现整个页面无刷新的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法相关推荐

  1. zan php demo,ajax+php+mysql实现无刷新点赞功能

    从动态图看出来,点击赞的按钮的时候,旁边的赞数量在无刷新地增加.打开数据库也能看到赞数量更新了. 原理就是通过ajax异步提交数据给数据库. 首先前端页面就是一个按钮和赞数量. 数据库名,test,表 ...

  2. web页面到ajax,页面使用ajax加载页面后如果运行其中的js,webpack如何多页面展示...

    1.页面使用了sui-mobile这个框架,其中的页面路由部分会使用ajax加载页面.虽然每次都能加载到下一个页面,但是会出现加载到的页面中的js不去执行的情况. 2.页面打包使用了webpack,现 ...

  3. 仿联想商城laravel实战---5、无刷新的增删改查(动态页面更新的三种方式(html))...

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

  4. 用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新

    本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...

  5. jsp 页面刷新_如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询

    软件项目实训及课程设计指导--如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例 1.在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp (1)创建 ...

  6. 小程序不刷新页面更新数据

    微信小程序不刷新页面更新数据 小程序刷新页面过程大家都懂得,特别是网络不好的时候,觉得这te,ma,就是一种折磨,如何做到不刷新页面就可以更新数据? 页面栈: 小程序的每一个页面都是一个page对象, ...

  7. 不刷新页面更新内容的方法

    不刷新页面更新内容的方法 一个页面, 显示一篇武侠小说,这篇武侠小说有只有5个章节. 武侠小说主页假设为百度主页https://www.baidu.com/ 5个章节的内容都是从后端获取. 武侠小说主 ...

  8. eltable 无数据文案修改_记一次无数据库下动态更新文案的解决历程

    记一次无数据库下动态更新文案的解决历程 背景 一个简单官网 www.xxx.cn,使用 vue + nuxt 作为技术栈,做 ssr: 文案一开始是写死,后面产品提需求了,说他们想要可以随时修改这些文 ...

  9. js 刷新页面但是不闪烁_前端开发还在手动刷新页面?手把手教你搭建一个自动刷新工具...

    作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...

最新文章

  1. 【LeetCode】106. Construct Binary Tree from Inorder and Postorder Traversal
  2. 梳理MVC 架构 MVVM架构
  3. shell经典脚本或命令行
  4. Keepalived工作原理
  5. 使用 asp.net mvc和 jQuery UI 控件包
  6. selenium鼠标操作 包含右击和浮层菜单的选择
  7. IIS+ASP.NET MVC必须知道的事
  8. python安装lap_一个python脚本解决安装mq的依赖问题
  9. pc模式 华为mate30_华为Mate30国内发布,这篇可能是全网最全干货贴
  10. 组建Forefront TMG独立陈列(上)-案例介绍与服务器准备
  11. java中json进阶_JSON学习
  12. X4扭曲字体或图形 coreldraw_CorelDRAW X4案例教程上-电子教案文档.ppt
  13. 智能爆炸的真实(下)
  14. word怎么根据点画曲线_word2010如何画直线,曲线,肘形连接符,曲线连接符,等多种直线和曲线类型...
  15. 如何在 2 分钟内入睡(二战时期美国飞行员训练法)
  16. 如何取得销售订单中订单货币和本位币之间的汇率 (exchange rate)
  17. selenium自动化测试环境搭建及启动safair浏览器(Mac)
  18. Surface电池阈值
  19. 票据背书以及票据背书的好处
  20. 使用SQL语句向表中插入多行数据

热门文章

  1. 30例 | 一文搞懂python日期时间处理
  2. 7x24小时实时互动,网易云信金融行业虚拟客服解决方案来啦!
  3. 互联网1分钟 |1221
  4. 分布式存储与传统SAN、NAS的优、劣对比
  5. python使用ElementTree解析XML文件
  6. 从传统运维到云运维演进历程之软件定义存储(五)下
  7. Linux的hostname修改详解
  8. ECSHOP发送邮件提示need rcpt command的解决方法
  9. [转载] C#面向对象设计模式纵横谈——10. Decorator装饰模式
  10. 开发常见错误解决(1)注册.NET EnterpriseServices COM+组件,事务服务不可用