使用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 相关文章推荐
第六节--访问属性和方法
Nov 16 PHP
php json_encode值中大括号与花括号区别
Sep 30 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
Sep 16 PHP
php正则匹配html中带class的div并选取其中内容的方法
Jan 13 PHP
详解WordPress中给链接添加查询字符串的方法
Dec 18 PHP
基于Swoole实现PHP与websocket聊天室
Aug 03 PHP
PHP获取input输入框中的值去数据库比较显示出来
Nov 16 PHP
php常用数组函数实例小结
Dec 29 PHP
简单谈谈PHP中的trait
Feb 25 PHP
PHP中的正则表达式实例详解
Apr 25 PHP
PHP定义字符串的四种方式详解
Feb 06 PHP
PHP常见的序列化与反序列化操作实例分析
Oct 28 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
简单的页面缓冲技术
2006/10/09 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python操作xml文件示例
2014/04/07 Python
python实现ipsec开权限实例
2014/11/11 Python
Python利用ansible分发处理任务
2015/08/04 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
什么是继承
2013/12/07 面试题
幼儿园教师培训制度
2014/01/16 职场文书
公司授权委托书范文
2014/08/02 职场文书
运动会演讲稿50字
2014/08/25 职场文书
围城读书笔记
2015/06/26 职场文书
公司职员入党自传书
2015/06/26 职场文书