使用laravel和ajax实现整个页面无刷新的操作方法


Posted in PHP onOctober 03, 2019

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>

效果:

使用laravel和ajax实现整个页面无刷新的操作方法

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实现整个页面无刷新的操作方法

以上这篇使用laravel和ajax实现整个页面无刷新的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
Mar 10 PHP
php 小乘法表实现代码
Jul 16 PHP
ajax php 实现写入数据库
Sep 02 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
Sep 30 PHP
探讨各种PHP字符串函数的总结分析
Jun 05 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
Mar 14 PHP
thinkphp四种url访问方式详解
Nov 28 PHP
php实现给一张图片加上水印效果
Jan 02 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
Mar 23 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
Jun 07 PHP
Mac下关于PHP环境和扩展的安装详解
Oct 17 PHP
PHP7 其他修改
Mar 09 PHP
laravel 实现登陆后返回登陆前的页面方法
Oct 03 #PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
Oct 03 #PHP
基于laravel-admin 后台 列表标签背景的使用方法
Oct 03 #PHP
浅谈laravel-admin的sortable和orderby使用问题
Oct 03 #PHP
关于laravel后台模板laravel-admin select框的使用详解
Oct 03 #PHP
laravel-admin select框默认选中的方法
Oct 03 #PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
Oct 03 #PHP
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
无限级别菜单的实现
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JavaScript常用数学函数用法示例
2018/05/14 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
关于青春的演讲稿
2014/05/05 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
同意迁入证明模板
2014/10/26 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
党员违纪检讨书
2015/05/05 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python